Я пытаюсь создать графику, похожую на эту, на веб-сайте MaterializeCSS, но я не могу понять, откуда она, я просматриваю весь веб-сайт MaterializeCSS, и она не является частью структуры, и я не могу найти в коде что они используют

Я особенно заинтересован в этих маленьких коробочках: (https://ibb.co/7vZVjZ8)

Маленькая квадратная графика

Пример сайта можно найти здесь: https://themes.materializecss.com/pages/admin-dashboard.html

3
Ricard 24 Июл 2020 в 02:47

2 ответа

Лучший ответ

Я думаю, что вы можете использовать Chartist.js с некоторыми изменениями, посмотрите на мой код, я создаю для вас пример

https://codepen.io/icaronz/pen/qBbvmNR

По сути, вам нужно установить Chartist.js, чтобы он не имел значений оси:

var chart = new Chartist.Line('.ct-chart', {
  labels: [1, 2, 3, 4],
  series: [
    [1, 4, 2, 5],
    [2, 3, 1, 4]
  ]
}, {
  showPoint: false,
  showLine: false,
  showArea: true,
  fullWidth: true,
  showLabel: false,
  axisX: {
    showGrid: false,
    showLabel: false,
    offset: 0
  },
  axisY: {
    showGrid: false,
    showLabel: false,
    offset: 0
  },
  chartPadding: 0,
  low: 0,
  width: 400,
  height: 200
});

Также не забудьте импортировать необходимые CSS и JS из CDN.

<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
1
Icaro 24 Июл 2020 в 00:23

Я думаю, что это создано с помощью chartjs https://www.chartjs.org/

0
PH83 24 Июл 2020 в 00:21