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

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

样品提到有绘制在x-轴索引的垂直线与所述数据值“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 
});