Javascript 如何为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)
    }

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

我需要什么

我得到的

---

谢谢。

解决这个问题有不同的方法

根据我给一个类似问题的答案，你可以定义一个函数来画线

在对前面提到的答案的评论中，他提出了一种方法，在该方法中，他定义了相同的

数据

值三次，但确保前导和结束数据点的

点半径

为零

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

新图表（“折线图”{
键入：“行”，
数据：{
标签：[null，'A'，null]，
数据集：[{
数据：[120120120]，
填充：假，
背景色：“0168FF”，
边框颜色：“0168FF”，
pointBackgroundColor:“白色”，
点边界宽度：1，
线张力：0，
pointBorderColor:“蓝色”，
点半径：[0,4,0]，
pointHoverRadius:[0,4,0]，
}],
},
选项：{
图例：{
显示：假
},
工具提示：{
已启用：false
},
比例：{
雅克斯：[{
滴答声：{
填充：20，
分:0,，
步长：100
},
网格线：{
抽边线：假
}
}],
xAxes：[{
滴答声：{
显示：假
},
网格线：{
zeroLineColor:“透明”，
抽边线：假，
显示：假
}
}]
}
}
});


datasets: [{
  data: [120, 120, 120],
  ...
  pointRadius: [0, 4, 0],
  pointHoverRadius: [0, 4, 0],
}],