javascript - 如何更改 chart.js 中的 X 轴间隔

Question

现在我正在使用“chart.js”，我从服务器接收动态月度报告数据。 x轴有31个数据，我想把x轴的值显示成5的倍数(5,10,15,20,25,30)。

我们可以通过以下方法做到这一点，但只能作为静态值。

var thisYearData = {
  labels: ["Jul 5", "Jul 10", "Jul 15", "Jul 20", "Jul 25", "Jul 30"],
  datasets: [{
    label: "This year dataset",
    fillColor: "#9C2E9D",
    strokeColor: "#9C2E9D",
    pointColor: "transparent",
    pointStrokeColor: "transparent",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "#9C2E9D",
    data: [45, 62, 15, 78, 58, 98]
  }]
};

但我想动态提供一个间隔。

我们可以通过以下方法为 Y 轴提供间隔。

var lastYearChart = new Chart(lastYearCTX).LineAlt2(lastYearData, {
  datasetFill: false,
  scaleSteps: 5,
  scaleStepWidth: 20,
  scaleStartValue: 0
}); 

但是 scaleSteps: 5, scaleStepWidth: 20，我需要 X 轴的这些选项。

正如您可以从以下屏幕截图中看到的当前输出。

我的脚本:

var flwrgrwth = document.getElementById("followergrowth").getContext("2d");
    Chart.types.Line.extend({
    name: "LineAlt2",
    initialize: function() {
        Chart.types.Line.prototype.initialize.apply(this, arguments);
        var ctx = this.chart.ctx;
        var originalStroke = ctx.stroke;
        ctx.stroke = function() {
            ctx.save();
            originalStroke.apply(this, arguments)
            ctx.restore();
        }
    }
});

var flwrgrwthchart = {
    labels: data.ltxt_array,
    datasets: [{
        label: "Twitter Follower Growth",
        fillColor: "#54c0eb",
        strokeColor: "#54c0eb",
        pointColor: "transparent",
        pointStrokeColor: "transparent",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "#54c0eb",
        data: data.lval_array,
    }]
};

var twitflwrgrwthscale = new Chart(flwrgrwth).LineAlt2(flwrgrwthchart, {
    datasetFill: false,
    scaleShowVerticalLines: false,
    datasetStrokeWidth: 2,
    scaleFontSize: 10,
    scaleFontColor: '#111111',
    scaleGridLineColor: '#f5f5f5',
    scaleLineColor: '#f5f5f5',
    scaleOverride: true,
    scaleSteps: 5,
    scaleStepWidth: 20,
    scaleStartValue: 0
});

Answer 1

我认为您正在使用数据字符串作为标签，因此任何内置逻辑都不起作用。

您可以根据选定的日期范围和间隔动态创建标签。

var labels = [];
// get interval
var interval  = 5;
//Get start date
var date_start =  new Date("July 5");
for ( var i = 0; i <= 30; i += interval) {
    //Set date
    date_start.setDate(date_start.getDate() + interval);
    //get Month
    var month_name  = date_start.toLocaleString(navigator.language, { month: "short" });
    //Add to labels
    labels.push(month_name + " " + date_start.getDate());
}