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

问题描述

我能够为 X 标签添加偏移量，但我想为数据集中的所有点添加偏移量.有可能吗?

这是我正在使用的代码:

var myChart = new Chart.Line(ctx, {类型:'线'，数据: {标签:[一月"、二月"、三月"、四月"、五月"、六月"、七月"、八月"、九月"、十月"、十一月"、十二月", ""],数据集:[{数据:[5, 10.5, 18.2, 33.9, 121.2, 184.9, 179.9, 196.1, 158.3, 166.3, 66.4, 20.6, 空],点标签字体大小:4，边框宽度:2，填充:假，线张力:0.3，边框颜色:#f37029"，borderCapStyle: '圆形',边界破折号:[]，borderDashOffset: 0.0,borderJoinStyle: '斜角',pointBorderColor: "#f37029",点背景颜色:#f37029"，点边框宽度:1，点悬停半径:4，pointHoverBackgroundColor: "rgba(220,220,220,1)",pointHoverBorderColor: "rgba(220,220,220,1)",pointHoverBorderWidth: 2,点半径:4，点命中半径:10，跨度间隙:假，}]},选项: {秤:{x轴:[{网格线: {偏移网格线:真，显示:假，边界破折号:[6, 2]，刻度标记长度:5},滴答声:{字体大小:8，标签偏移:10，最大旋转:0}}],y轴:[{网格线: {显示:假},滴答声:{beginAtZero:是的，最大:200，分钟:0，步长:20，字体大小:8}}]},传奇: {显示:假},响应:错误，保持纵横比:真}});

我想将该偏移量应用于所有点，在图像中我刚刚向 JAN/DEC 添加了一个箭头，但我想将其应用于所有点.

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

有什么想法吗?提前致谢.

解决方案

您可以使用 Chart.js 插件实现此目的.它们让您可以处理在图表创建期间触发的特定事件(beforeInit、afterUpdate、afterDraw ...)，并且也很容易实现:

Chart.pluginService.register({更新后:函数(图表){//每次更新图表后都会触发}});

现在您只需遍历您的数据集数据模型(用于绘制图表的属性)并添加您想要的偏移量:

Chart.pluginService.register({更新后:函数(图表){//我们获取数据集并在此处设置偏移量var dataset = chart.config.data.datasets[0];变量偏移量 = 20;//对于数据集中的每个数据...for (var i = 0; i 

您可以看到您的示例

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 :

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