Question

我在chartjs中有一个折线图，我想在给定x轴像素值的行上找到任意点的Y值。

目前我正在挂钩afterDatasetsDraw事件，将阴影区域添加到图表中，但我还想找出阴影区域开头和结尾的黑线（Axis B）的值，它不一定与我的数据点对齐。

afterDatasetsDraw: function (chart) {
        var options = chart.config.options.plugins.shader;

        if (!options.hasOwnProperty('points')) {
            return;
        }

        if (options.points.length < 2) {
            return;
        }

        var ctx = chart.chart.ctx;

        var x1, y1, x2, y2, x3, y3, x4, y4, x0, xf;

         console.log(chart);
        x0 = chart.scales['x-axis-0'].left;
        xf = chart.scales['x-axis-0'].right;

        x1 = ((xf - x0) * 0.12) + x0; // start shading at 12% in for example
        y1 = chart.scales['A'].bottom;

        x2 = x1;
        y2 = chart.scales['A'].top;

        x3 = ((xf - x0) * 0.66) + x0; // end shading at 66% for example
        y3 = y2;

        x4 = x3;
        y4 = y1;

// console.log(chart.scales['B'].getValueForPixel(x1));
// console.log(chart.scales['B'].getValueForPixel(x3));
// console.log(chart.scales['A'].getValueForPixel(x1));
// console.log(chart.scales['A'].getValueForPixel(x3));
// console.log(chart.scales['x-axis-0'].getValueForPixel(x1));
// console.log(chart.scales['x-axis-0'].getValueForPixel(x3));

        ctx.fillStyle = 'rgba(127, 127, 127, 0.3)';

        ctx.beginPath();
        ctx.moveTo(x1,y1);
        ctx.lineTo(x2, y2);
        ctx.lineTo(x3, y3);
        ctx.lineTo(x4, y4);
        ctx.lineTo(x1,y1);
        ctx.closePath();
        ctx.fill();
    }
});

我会从文档中假设我可以使用scale getValueForPixel（）方法（如注释所示），但那些返回奇怪的值。 X轴值返回为1和3，据我所知，它是最接近的数据点的索引。 Y刻度返回的数字与数据集或渲染图中的任何内容都不对应。

从ChartJS 2中的X像素值获取行的Y值

0 个答案: