如何向图表js中的数据集添加偏移量 [英] How to add an offset to a dataset in Chart js

问题描述

我可以向X Labels添加一个偏移量，但我想为数据集中的所有点添加一个偏移量。可能吗？

这是我使用的代码：

  var myChart = new Chart。 Line（ctx，{
 type：'line'，
 data：{
 labels：[JAN，FEB，MAR，APR，MAY， JUN，JUL，AUG，SEP，OCT，NOV，DEC，]，
数据集：[{
 data：[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，
}] 
}，
选项：{
 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，但我想把它应用到所有的。

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

任何想法？提前感谢。

解决方案

您可以使用Chart.js插件实现此目的。它们允许您处理在创建图表期间触发的特定事件（ beforeInit ， afterUpdate ， afterDraw ...），并且也很容易实现：

  pluginService.register（{
 afterUpdate：function（chart）{
 //这将在每次更新图表后触发
} 
}）; 
  

现在，您只需循环浏览数据集数据模型您想要的偏移量：

  Chart.pluginService.register（{
 afterUpdate：function （chart）{
 //我们得到数据集并设置偏移
 var dataset = chart.config.data.datasets [0]; 
 var offset = 20; 
 
 //对于数据集中的每个数据... 
 for（var i = 0; i  // We获取与此数据链接的模型
 var model = dataset._meta [0] .data [i] ._ model; 
 
 //并将偏移量添加到`x`属性
 model.x + = offset; 
 
 // ..以及这两个属性
 //使贝塞尔曲线适合新图形
 model.controlPointNextX + = offset; 
 model.controlPointPreviousX + = offset; 
} 
} 
}）; 
  

您可以看到您的示例工作

I was able to add an offset to the X Labels but I would like to add an offset to all the points in the dataset. Is it possible?

This is the code I'm using:

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

I would like to apply that offset to all the points, in the image I just added an arrow to the JAN/DEC but I would like to apply it to all of them.

I tried adding a null data, the problem is that I don't want to show the first dashed grid.

Any ideas? Thanks in advance.

解决方案

You can achieve this using Chart.js plugins. They let you handle specific events triggered during the chart creation (beforeInit, afterUpdate, afterDraw ...) and are also easy to implement :

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

Now you just have to loop through your dataset data model (the property used to draw charts) and add the offset you want :

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

You can see your example working on this jsFiddle and here is its result :

这篇关于如何向图表js中的数据集添加偏移量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！