如何向图表中的数据集添加偏移量js

我能够向X标签添加偏移量，但我想为数据集中的所有点添加偏移量。可能吗？如何向图表中的数据集添加偏移量js

Chart

这是我使用的代码：

var myChart = new Chart.Line(ctx, { 
    type: 'line', 
    data: { 
     labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC", ""], 
     datasets: [{ 
      data: [5, 10.5, 18.2, 33.9, 121.2, 184.9, 179.9, 196.1, 158.3, 166.3, 66.4, 20.6, null], 
      pointLabelFontSize : 4, 
      borderWidth: 2, 
      fill: false, 
      lineTension: .3, 
      borderColor: "#f37029", 
      borderCapStyle: 'round', 
      borderDash: [], 
      borderDashOffset: 0.0, 
      borderJoinStyle: 'bevel', 
      pointBorderColor: "#f37029", 
      pointBackgroundColor: "#f37029", 
      pointBorderWidth: 1, 
      pointHoverRadius: 4, 
      pointHoverBackgroundColor: "rgba(220,220,220,1)", 
      pointHoverBorderColor: "rgba(220,220,220,1)", 
      pointHoverBorderWidth: 2, 
      pointRadius: 4, 
      pointHitRadius: 10, 
      spanGaps: false, 
     }] 
    }, 
    options: { 
     scales: { 
      xAxes: [{ 
       gridLines: { 
        offsetGridLines: true, 
        display: false, 
        borderDash: [6, 2], 
        tickMarkLength:5 
       }, 
       ticks: { 
        fontSize: 8, 
        labelOffset: 10, 
        maxRotation: 0 
       }}], 
      yAxes: [{ 
       gridLines: { 
        display:false 
       }, 
       ticks: { 
        beginAtZero: true, 
        max: 200, 
        min: 0, 
        stepSize: 20, 
        fontSize: 8 
       } 
      }] 
     }, 
     legend: { 
      display: false 
     }, 
     responsive: false, 
     maintainAspectRatio: true 
    } 
});

我想申请该抵消所有的点，像在我刚刚添加了一个箭头，JAN/DEC但我想将它应用于所有这些。

我试着添加一个空数据，问题是我不想显示第一个虚线网格。

任何想法？提前致谢。

来源

2016-09-26 zkropotkine

你可以使用Chart.js插件来实现这一点。他们让你处理图表创建（beforeInit，afterUpdate，afterDraw ...）时触发特殊事件，也是容易实现：

Chart.pluginService.register({ 
    afterUpdate: function(chart) { 
     // This will be triggered after every update of the chart 
    } 
});

现在你只要通过你的数据集的数据模型必须循环（使用的属性绘制图表），然后添加偏移你想：

Chart.pluginService.register({ 
    afterUpdate: function(chart) { 
     // We get the dataset and set the offset here 
     var dataset = chart.config.data.datasets[0]; 
     var offset = 20; 

     // For every data in the dataset ... 
     for (var i = 0; i < dataset._meta[0].data.length; i++) { 
      // We get the model linked to this data 
      var model = dataset._meta[0].data[i]._model; 

      // And add the offset to the `x` property 
      model.x += offset; 

      // .. and also to these two properties 
      // to make the bezier curve fits the new graph 
      model.controlPointNextX += offset; 
      model.controlPointPreviousX += offset; 
     } 
    } 
});

你可以看到你的榜样工作on this jsFiddle这里是它的结果：