如何在Charts.JS中为单个值在折线图中绘制一条线

Question

我需要在折线图中绘制单个值。目前，我正在使用Charts.JS库用于折线图。

某些时候数据会有所变化，那时候我需要在折线图中绘制单个值。

我曾尝试过charts.js annotation plugin，但它不符合我的要求。就像它与图形区域中的绘制点重叠一样。

我的代码

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)
    }

    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()
  }

我需要什么

我正在得到什么

谢谢。

Answer 1

存在解决此问题的不同方法。

1. 根据我提出的类似问题的answer，您可以定义animation.onComplete函数来画线。

2. 在对前面提到的答案的评论中，animation.onComplete提出了一种方法，其中他定义了3次相同的Lakshmansundeep值，但要确保起始和结束数据点的data为零。

   数据集：[{数据：[120，120，120]，...pointRadius：[0，4，0]，pointHoverRadius：[0，4，0]，}]，

对于第二种方法，请看下面的代码。

pointRadius

new Chart('line-chart', {
  type: "line",
  data: {
    labels: [null, 'A', null],
    datasets: [{
      data: [120, 120, 120],
      fill: false,
      backgroundColor: "#0168FF",
      borderColor: "#0168FF",
      pointBackgroundColor: "white",
      pointBorderWidth: 1,      
      lineTension: 0,
      pointBorderColor: "blue",
      pointRadius: [0, 4, 0],
      pointHoverRadius: [0, 4, 0],
    }],
  },
  options: {
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    scales: {
      yAxes: [{
        ticks: {
          padding: 20,
          min: 0,
          stepSize: 100
        },
        gridLines: {
          drawBorder: false
        }
      }],
      xAxes: [{
        ticks: {
          display: false
        },
        gridLines: {
          zeroLineColor: "transparent",
          drawBorder: false,
          display: false
        }
      }]
    }
  }
});