Question

我正在用Chart.js绘制一条线。我正在策划时间与某些价值。我想在轴上修复时隙。我使用stepSize属性，但它没有应用。

以下是代码：

var data = {
  labels: [1495015201000, 1495015202000, 1495015203000, 1495015204000, 1495015205000, 1495015206000, 1495015207000, 1495015208000, 1495015209000, 1495015210000, 1495015211000, 1495015212000, 1495015213000, 1495015214000, 1495015215000, 1495015216000, 1495015217000, 1495015218000, 1495015219000, 1495015220000, 1495015221000, 1495015222000, 1495015223000, 1495015224000, 1495015225000, 1495015226000, 1495015227000, 1495015228000, 1495015229000, 1495015230000, 1495015231000, 1495015232000, 1495015233000, 1495015234000, 1495015235000, 1495015236000, 1495015237000, 1495015238000, 1495015239000, 1495015240000, 1495015241000, 1495015242000, 1495015243000, 1495015244000, 1495015245000, 1495015246000, 1495015247000, 1495015248000, 1495015249000, 1495015250000, 1495015251000, 1495015252000, 1495015253000, 1495015254000, 1495015255000, 1495015256000, 1495015257000, 1495015258000, 1495015259000, 1495015260000],
  datasets: [{
    label: "DataSet",
    backgroundColor: "rgba(255,99,132,0.2)",
    borderColor: "rgba(255,99,132,1)",
    borderWidth: 1,
    hoverBackgroundColor: "rgba(255,99,132,0.4)",
    hoverBorderColor: "rgba(255,99,132,1)",
    data: [10, 15, 47, 58, 54, 1, 6, 8],
    scaleOverride: false,
    scaleSteps: 0,
    scaleStartValue: 0,
    scaleStepWidth: 1
  }]
};

var myBarChart = new Chart($("#a"), {
  type: 'line',
  data: data,
  options: {
    scales: {
      yAxes: [{
        scaleLabel: {
          display: true
        }
      }],
      xAxes: [{
        type: 'time',
        autoSkip: false,
        ticks: {
          min: 1495015201000,
          stepSize: 10000,
          max: 1495015260000
        },
        scaleLabel: {
          display: true
        },
      }]
    }
  }
});

JSFiddle link

我需要根据步长在x轴上进行修复缩放。在目前的情况下，我需要10秒的时差。

Answer 1

您可以使用Time Scale完成所需的操作，而不是使用刻度线配置让xAxes跳过10秒。

time: {
    unit: 'second',
    unitStepSize: 10
}

JSFiddle演示：https://jsfiddle.net/q7qnh9so/5/

Chart.js stepSize不适用于日期的折线图

1 个答案: