图表 js x 轴从 0 开始 - Javascript

在绘制图表时，我们通常会设置 x 轴的起始值，以便更好地展示数据。然而，有时候你需要让 x 轴从 0 开始，这时候该怎么做呢？本篇文章将介绍如何使用 Javascript 实现让 x 轴从 0 开始的方法。

方法 1：设置图表配置

可以在绘制图表时通过配置对象来设置 x 轴起始值为 0，具体代码如下：

var chartConfig = {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            data: [0, 10, 5, 2, 20, 30, 45],
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }]
    },
    options: {
        scales: {
            x: {
              min: 0 // 设置 x 轴起始值为 0
            }
        }
    }
};

var myChart = new Chart(document.getElementById('myChart'), chartConfig);

通过设置 options.scales.x.min = 0，我们就能实现将 x 轴起始值设置为 0。

方法 2：使用 Chart.js 插件

如果你想话更少的代码实现让 x 轴从 0 开始，你可以使用一个名为 chartjs-plugin-axistitles 的插件。这个插件允许你通过简单地调用 zeroLineIndex 来将 x 轴起始值设置为 0。下面是一个使用该插件的例子：

const Chart = require('chart.js');
const axisTitle = require('chartjs-plugin-axistitles');

Chart.register(axisTitle);

var myChart = new Chart(document.getElementById('myChart'), {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            data: [0, 10, 5, 2, 20, 30, 45],
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }]
    },
    options: {
        plugins: {
            axistitles: {
                zeroLineIndex: 0 // 将 x 轴起始位置设置为 0
            }
        }
    }
});

通过调用 zeroLineIndex: 0，我们就能完成让 x 轴从 0 开始的操作了。

以上是两种让 x 轴从 0 开始的方法，你可以根据个人需求选择适合的方法。