JavaScript图形编程

Question

我试图创建一些类似于MaterializeCSS网站中这个图形的图形，但我无法弄清楚它来自哪里，我查看了整个MaterializeCSS网站，它不是框架的一部分，并且我找不到它们在使用什么代码。

我特别感兴趣的是那些小框：(https://ibb.co/7vZVjZ8)

小正方形图形

示例网站可以在此处找到: https://themes.materializecss.com/pages/admin-dashboard.html

- Ricard

Answer 1

我猜你可以用一些修改来使用Chartist.js，看看我在CodePen上创建的示例

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
});

此外，不要忘记从CDN导入必要的CSS和JS。

<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" />

- Icaro

Answer 2

我认为这是使用Chart.js创建的https://www.chartjs.org/。

- PH83