Chart.js 学习


Chart.js 学习

正文

Chart.js 是一个基于 canvas 的图表库，支持折线图、柱状图、饼图等。

官网：https://www.chartjs.org/

源码：https://github.com/chartjs

示例：

<!DOCTYPE html>
<head>  
    <title>无标题页</title>  
</head>  
<body>  
    <div>
        <canvas id="myChart"></canvas>
      </div>      
</body>  

<script src="./Chart.min.js"></script>

<script>
const data = [
    { year: 2010, count: 15 },
    { year: 2011, count: 20 },
    { year: 2012, count: 15 },
    { year: 2013, count: 10 },
    { year: 2014, count: 22 },
    { year: 2015, count: 30 },
    { year: 2016, count: 28 },
];
  
new Chart(document.getElementById('myChart'), {
    type: 'bar',
    data: {
        labels: data.map(row => row.year),
        datasets: [
            {
                label: '每年收益',
                data: data.map(row => row.count),
                borderColor: '#36A2EB',
            }
        ]
    },
    options: {
        scales: {
            y: {
                beginAtZero: false
            }
        }
    }
});
</script>
</html>






参考资料

返回