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

如何在chart.js中更改X轴间隔

1 个答案: