chart.js记录

//线图中画线
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 index = chart.config.data.lineAt;
        if (index) {
          var xaxis = chart.scales['x-axis-0'];
          var yaxis = chart.scales['y-axis1'];

          ctx.save();
          ctx.beginPath();
          ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top);
          ctx.strokeStyle = '#ff0000';
          ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
          ctx.stroke();
          ctx.restore();
        }
      }
    });

var ct = new Chart($("canvas")[0].getContext("2d"), {
       type: 'line',
       data: {
         labels: ${xLabels},
         datasets: [
           {
             type: 'line',
             label: '${label1}',
             backgroundColor: "rgba(0,112,192, 1)",
             borderColor: "rgba(0,112,192, 1)",
             data: ${yData1},
             borderWidth: 2,
             pointRadius: 0,
             fill: false,
             yAxisID: 'y-axis1'
           }, {
             type: 'line',
             label: '${label2}',
             backgroundColor: "rgba(237,125,48, 0.5)",
             borderColor: "rgba(237,125,48, 0.5)",
             data: ${yData2},
             borderWidth: 2,
             pointRadius: 0,
             fill: false,
             yAxisID: 'y-axis2'
           }
         ],
         lineAt: 100
       },
       options: {
         elements: {
             line: {
                 tension: 0, // disables bezier curves
             }
         },
         animation: {
             duration: 0
         },
         responsiveAnimationDuration: 0,
         legend: {
           position: 'bottom',
           labels:{
             fontSize: 8,
             fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
           }
         },
         title: {
             display: true,
             fontSize: 16,
             text: '${chartTitle}'
         },
         tooltips: {
             mode: 'nearest',
             intersect: true,
             callbacks: {
                 label: function(tooltipItem, data) {
                     var isy1 = data.datasets[tooltipItem.datasetIndex].yAxisID == 'y-axis1';
                     var label = data.datasets[tooltipItem.datasetIndex].label + ": " + (isy1 ? '${y1Pre}' : '${y2Pre}');
                         label += Number(
                             data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]
                         ).toFixed(2) + 
                     (isy1 ? ' ${y1Title.substring(y1Title.indexOf("/"))}' : ' ${y2Title.substring(y2Title.indexOf("/"))}');
                     return label;
                 }
             }
         },
         responsive: true,
         hover: {
             mode: "nearest",
             intersect: true,
             animationDuration: 0
          },
         scales: {
           xAxes: [
             {
               display: true,
               scaleLabel: {
                 display: false,
                 labelString: "Pillar"
               },
               gridLines: {
                 display: false,
                 drawBorder: false,
                 zeroLineWidth: 0
               },
               ticks: {
               }
             }
           ],
           yAxes: [
             {
                id: 'y-axis1',
                display: true,
                position: 'left',
                scaleLabel: {
                  display: true,
                  labelString: "${y1Title}"
                },
                gridLines: {
                    
                },
                ticks: {
                    beginAtZero: true,
                    callback: function(label, index, labels) {
                         return '${y1Pre}' + Number(label).toFixed(2);
                     }
                }
             },
             {
                id: 'y-axis2',
                display: true,
                position: 'right',
                scaleLabel: {
                  display: true,
                  labelString: "${y2Title}"
                },
                gridLines: {
                  display: false
                },
                ticks: {
                    beginAtZero: true,
                    callback: function(label, index, labels) {
                         return '${y2Pre}' + Number(label).toFixed(2);
                     }
                }
             }
           ]
         }
       },
       plugins: [{
           beforeRender: function(chart, options){
            var mi = ${mmIndex};
            chart.data.datasets.forEach(function(v, i) {
                var md = chart.getDatasetMeta(i), isy1 = md.yAxisID == 'y-axis1';
                if (isy1) {
                    md.data[mi[0]]._model.backgroundColor = 'rgba(255,192,0, 1)';
                    md.data[mi[0]]._model.borderColor = 'rgba(255,192,0, 1)';
                    md.data[mi[0]]._model.radius = 5;
                    
                    md.data[mi[1]]._model.backgroundColor = 'rgba(255,192,0, 1)';
                    md.data[mi[1]]._model.borderColor = 'rgba(255,192,0, 1)';
                    md.data[mi[1]]._model.radius = 5;
                } else {
                    md.data[mi[2]]._model.backgroundColor = 'rgba(192,0,0, 1)';
                    md.data[mi[2]]._model.borderColor = 'rgba(192,0,0, 1)';
                    md.data[mi[2]]._model.radius = 5;
                    
                    md.data[mi[3]]._model.backgroundColor = 'rgba(192,0,0, 1)';
                    md.data[mi[3]]._model.borderColor = 'rgba(192,0,0, 1)';
                    md.data[mi[3]]._model.radius = 5;
                }
            });
           }
       }]
     });

line chart sample