【问题标题】:Chart.js stepSize is not working for Line chart for dateChart.js stepSize 不适用于日期折线图
【发布时间】:2017-05-17 13:24:13
【问题描述】:

我正在用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 秒。

【问题讨论】:

    标签: javascript charts linechart chart.js2


    【解决方案1】:

    您可以使用Time Scale 来完成您想要的操作,而不是使用滴答配置让 xAxes 跳过 10 秒。

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

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

    【讨论】:

    猜你喜欢
    • 2020-11-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-07-18
    • 1970-01-01
    相关资源
    最近更新 更多