chartist.js使用教程

<!-- 通过CDN引入 -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

<!-- 创建图表容器 -->
<div class="ct-chart"></div>

<!-- 准备数据 -->
<script>
const data = {
  labels: ['周一', '周二', '周三', '周四', '周五'],
  series: [[12, 9, 7, 8, 5], [2, 1, 3.5, 7, 3]]
};

// 创建图表实例
new Chartist.Line('.ct-chart', data);
</script>

.ct-series-a .ct-line {
  stroke-width: 2px;
}

chart.on('draw', function(data) {
  if (data.type === 'point') {
    data.element.getNode().addEventListener('click', function() {
      alert('点击了数值 ' + data.value.y);
    });
  }
});