在chart.js图表上覆盖线条

velaa5lx  于 2022-11-06  发布在  Chart.js
关注(0)|答案(4)|浏览(192)

我想知道是否可以在chart.js图表(如折线图)上覆盖一条线?例如,在x轴上,将在图表上值20处绘制一条水平线

7ajki6be

7ajki6be1#

我已经创建了一个叫做覆盖图的东西,我已经把它添加到chart.js(https://github.com/leighquince/Chart.js)的分支中,它可以在这种情况下使用。它的工作原理和折线图或条形图一样,唯一的区别是你声明了一个叫做type的额外属性,它可以是'line''bar'。然后只需要调用new Chart(ctx).Overlay(data)
所以对于你的例子,你可以只有你的条形图,然后提供另一个数据集(用一些比我用过的更好的颜色)来显示线。
第一个

wwtsj6pe

wwtsj6pe2#

我需要类似的东西,但不是一个线 * 图 * 我需要像一个真实的的覆盖线是平的。
只是这样扩展了图表:

Chart.types.Bar.extend({
        name: 'BarOverlay',
        draw: function (ease) {
            Chart.types.Bar.prototype.draw.apply(this);
            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'rgba(255, 0, 0, 1.0)';
            ctx.moveTo(35, this.scale.calculateY(100));
            ctx.lineTo(this.scale.calculateX(this.datasets[0].bars.length), this.scale.calculateY(100));
            ctx.stroke();
        }
    });

我的代码是硬编码的,在“100”标记处画一条线(在本例中,我们希望有一个100%的目标)。
并这样称呼它:

new Chart(ctx).BarOverlay(data, options);

我还发现Quince的代码过时了,不知何故与1.0.2 Chart.js代码不兼容(渲染完全偏离了方向)。

kwvwclae

kwvwclae3#

StrangeWill的答案作为基础非常好,但我需要条形图上的数据驱动垂直线,因此将其修改如下:
首先,我向options数组添加了一个属性(添加另一个数据集可能更简洁,但我必须告诉ChartJS忽略它),其中每个选项都是我想要突出显示的数据值索引,大致如下:

ChartDefaults.verticalOverlayAtBar = [itemOne, itemTwo]
...
var HistoryChart = new Chart(ctx).BarOverlay(ChartData, ChartDefaults);

然后,我修改了StrangeWill的代码,扩展它以迭代上面的项目数组,并在指定的栏上绘制垂直线。

Chart.types.Bar.extend({
    name: 'BarOverlay',
    draw: function (ease) {

        // First draw the main chart
        Chart.types.Bar.prototype.draw.apply(this);

        var ctx = this.chart.ctx;
        var barWidth = this.scale.calculateBarWidth(this.datasets.length);

        for (var i = 0; i < this.options.verticalOverlayAtBar.length; ++i) {

            var overlayBar = this.options.verticalOverlayAtBar[i];

            // I'm hard-coding this to only work with the first dataset, and using a Y value that I know is maximum
            var x = this.scale.calculateBarX(this.datasets.length, 0, overlayBar);
            var y = this.scale.calculateY(2000);

            var bar_base = this.scale.endPoint

            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'rgba(255, 0, 0, 1.0)';
            ctx.moveTo(x, bar_base);
            ctx.lineTo(x, y);
            ctx.stroke();
        }
        ctx.closePath();
    }
});

它并不完美,因为我不熟悉ChartJs的内部代码,特别是我的线条偏离了2条线,虽然我怀疑这是数据数组中的一个栅栏错误,而不是图表计算。然而,希望这对其他人来说是一个有用的进步。

ruyhziif

ruyhziif4#

还有https://github.com/chartjs/chartjs-plugin-annotation(通过https://github.com/chartjs/awesome,“与Chart.js相关的令人敬畏的事情的精选列表”):
此插件可在图表区上绘制线条、方框、点、标签、多边形和椭圆。
注解可用于使用线性、对数、时间或类别刻度的折线图、条形图、散点图和气泡图。
但你不能有额外的轴:
注解不适用于不是正好有两个轴的任何图表,包括饼图、雷达图和极坐标面积图。

相关问题