Question

这是一个很好的新版本的Chart.js，看起来更直观一些。但是我尝试使用V1设计的代码并没有使用它，但深入研究它，有点超出我的意思 - 我试图使用的代码是这里的最后一篇文章 - http://yuluer.com/page/dbajceij-chart-js-draw-horizontal-line.shtml

我的折线图代码如下：

$.ajax({
        url : "getData.asp",
        type: "POST",
        data : {
                database: dataBase,
                sn: Options,
                opts: opt,
                dateRange: dateRange
            },
        dataType:"json",
         success: function(result){
            var Result = (result)
            Array.prototype.mapProperty = function(property) {
              return this.map(function (obj) {
               return obj[property];
              });

             };
            var ctx = document.getElementById("chart");
            var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                    labels: result.mapProperty('sn'),
                    datasets: [{
                        label: opt,
                        data: result.mapProperty('data')
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: false
                            }
                        }]
                    }
                }
            }); 
})

有没有人设法在V2上获得自定义动态直线？

Answer 1

请参阅Chart.js 2.0 - vertical lines

在那里提到的Sample在xaxis索引处绘制了一条垂直线，配置了数据值“lineAtIndex”。要绘制水平线，您可以通过以下方式调整样本：

var originalLineDraw = Chart.controllers.line.prototype.draw;

Chart.helpers.extend(Chart.controllers.line.prototype, {
    draw: function() {

        originalLineDraw.apply(this, arguments);

        var chart = this.chart;
        var ctx = chart.chart.ctx;

        var lineAtValue = chart.config.data.lineAtValue;
        if (lineAtValue) {

            var xaxis = chart.scales['x-axis-0'];
            var yaxis = chart.scales['y-axis-0'];

            ctx.save();
            ctx.beginPath();
            ctx.moveTo(xaxis.left, yaxis.getPixelForValue(lineAtValue));
            ctx.strokeStyle = '#ff0000';
            ctx.lineTo(xaxis.right, yaxis.getPixelForValue(lineAtValue));
            ctx.stroke();
            ctx.restore();

        }
    }
});

然后配置为：

var chart = new Chart(ctx, {
    type: 'your-type',
    data: {
        labels: [your-labels],
        datasets: [...],
        lineAtValue: 20000
    },
    options: defaultOptions
});

如何使用ChartJS v2绘制动态直线

1 个答案: