如何用charts.js在线型图图表中绘制一个带线的单值？

Question

我需要在折线图中绘制一个单值。目前我正在使用 charts.JS 库来绘制折线图。

数据会有变化，有时我会在数据集中得到单个数据，这时我需要在线图中用线来绘制单个值。

我试过用 charts.js 注释插件，但它不符合我的要求，这就像它在图形区域重叠绘制点。

我试过的代码

createLineChart() {
   this.lineChart = new Chart(this.lineCanvas.nativeElement, {
      type: "line",

      data: {
        labels:[],

        datasets: [
          {
            fill: false,

            backgroundColor: "#0168FF",
            borderColor: "#0168FF",
            pointBackgroundColor: "white", // wite point fill
            pointBorderWidth: 1, // point border width
            lineTension: 0,
            pointBorderColor: "blue",
            pointRadius: 4,
          },
        ],
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                padding: 20,
                beginAtZero: true,
                min: 0,

                stepSize: 100,
              },
              gridLines: {
                drawBorder: false,
              },
            },
          ],
          xAxes: [
            {
             // offset: true,
              ticks: {
                display: false,
               //beginAtZero: true,
               min: 0,

              },
              gridLines: {
                zeroLineColor: "transparent",
                drawBorder: false,
                display: false,
              },
              //offset:true, 
            },
          ],
          legend: {
            display: false,
          },
          tooltips: {
            enabled: false,
          },
        },
          drawTime: "afterDraw", // (default)
        } as ChartOptions,
       // plugins: [ChartAnnotation]
      },
    });
  }

生成动态数据并绘制在图形区域。

generateRandomDataSet(size) {
    let yaxisArr = [];
    let xaxisArr = [];
    let random_data:any = this.getRandomData(size)
    let maxYTickVal = Math.max.apply(Math, random_data.map((val) => {return val.yaxis}));
    let maxVal = Math.ceil((maxYTickVal+1) / 10) * 10

    for(let data of random_data) {
      yaxisArr.push(data.yaxis)
      xaxisArr.push(data.xaxis)
    }



    console.log("X-Axis array values : "+xaxisArr)
    console.log("Y-Axis array values : "+yaxisArr)
    this.lineChart.data.datasets[0].data = yaxisArr
    this.lineChart.config.data.labels = []
    this.lineChart.config.data.labels = xaxisArr
    this.lineChart.config.options.scales.yAxes[0].ticks.max =maxVal
    this.lineChart.config.options.scales.yAxes[0].ticks.stepSize = maxVal/2


    this.lineChart.update()
  }

getRandomData(arraySize) {
  let data = []
  for(var i=1; i<=arraySize; i++) {
    let number = Math.floor(Math.random() * 200) + 1
    data.push({'xaxis':i,'yaxis':number})
  }
  return data
  } 

用上面的代码，我得到的是

我需要什么

Answer 1

你可以定义一个 animation.onComplete 函数如下，以在有单个数据值的情况下画线。

animation: {
  onComplete: e => {
    var ctx = chart.chart.ctx;
    var data =  chart.config.data.datasets[0].data;
    if (data[0] == null) {
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0']; 
      var y = yAxis.getPixelForValue(data[1]);         
      ctx.save();           
      ctx.globalCompositeOperation='destination-over';
      ctx.strokeStyle = 'blue'          
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(xAxis.left, y);             
      ctx.lineTo(xAxis.right, y);
      ctx.stroke();
      ctx.restore();       
    }    
  }
},

该函数期望得到 data 数组的格式为 [null, <value>, null] 以防出现单值，否则将很难将数据点水平居中（见此 回答). 由你自己决定是否改变 generateRandomDataSet() 函数的方式来提供这些数据。

请看下面的修改后的代码。

const chart = new Chart('line-chart', {
  type: "line",
  data: {
    labels: ['', 'A', ''],
    datasets: [{
      data: [null, 120, null],
      fill: false,
      backgroundColor: "#0168FF",
      borderColor: "#0168FF",
      pointBackgroundColor: "white",
      pointBorderWidth: 1,
      lineTension: 0,
      pointBorderColor: "blue",
      pointRadius: 4,
    }],
  },
  options: {
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    animation: {
      onComplete: e => {
        var ctx = chart.chart.ctx;
        var data =  chart.config.data.datasets[0].data;
        if (data[0] == null) {
          var xAxis = chart.scales['x-axis-0'];
          var yAxis = chart.scales['y-axis-0']; 
          var y = yAxis.getPixelForValue(data[1]);         
          ctx.save();           
          ctx.globalCompositeOperation='destination-over';
          ctx.strokeStyle = 'blue'          
          ctx.lineWidth = 2;
          ctx.beginPath();
          ctx.moveTo(xAxis.left, y);             
          ctx.lineTo(xAxis.right, y);
          ctx.stroke();
          ctx.restore();       
        }    
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          padding: 20,
          min: 0,
          stepSize: 100
        },
        gridLines: {
          drawBorder: false
        }
      }],
      xAxes: [{
        ticks: {
          display: false
        },
        gridLines: {
          zeroLineColor: "transparent",
          drawBorder: false,
          display: false
        }
      }]      
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="line-chart" height="80"></canvas>