Javascript 如何在chartJS中从最小值到最大值再到平均值之间画线？

我正在使用chartJS创建散点图，并尝试在最大值和平均值、最小值和平均值之间绘制线。 我已经用chartjs-plugin-annotation.js画了一条线

我在选项中传递了value和endvalue（注释配置），以便在chartJS中绘制线高度

但是我想要

我试过了

 var ctx = document.getElementById('myCanvas').getContext('2d');
 var myChart1 = new Chart(ctx, {
     type: 'scatter',
     plugins: [ChartAnnotation,ChartDataLabels],
     data: {
         datasets: [{
             radius : 10,
             hoverRadius : 10,
             backgroundColor : graphdataColor,
             data: graphdata1,
             datalabels : dataLablesOnGraphConfig
         },
         {
             // type : 'line',
             data: [{
                 x: 1300,
                 y: 300000
             }, {
                 x: 1400,
                 y: 350000
             }, {
                 x: 1500,
                 y: 400000
             }, {
                 x: 1600,
                 y: 450000
             }, {
                x: 1700,
                y: 500000
            }, {
                x: 1800,
                y: 550000
            }, {
                x: 1900,
                y: 600000
            }
         ],
             borderColor: 'black',
             borderWidth: 1,
             fill: false,
             showLine: true,
             pointRadius : 0,
             datalabels: {
                // display labels for this specific dataset
                display: false
            }

         }               
     ]
     }, 
options: {
        responsive: false,
        maintainAspectRatio: false,
        annotation: {
         events: ["click"],
            annotations: [
              {
                drawTime: "afterDatasetsDraw",
                id: "hline",
                type: "line",
                mode: "vertical",
                scaleID: "y-axis-0",
                value: this.state.pptData.minListPrice,
                endvalue : 520000,
                borderColor: "green",
                borderDash: [8,5],
                borderWidth: 2
              },
              {
                drawTime: "afterDatasetsDraw",
                id: "hline",
                type: "line",
                mode: "vertical",
                scaleID: "y-axis-0",
                value: this.state.pptData.maxListPrice,
                endvalue : 300000,
                borderColor: "green",
                borderDash: [5,10],
                borderWidth: 1
              },
            ]
          },  showLines : false,
         title: {
            display: true,
            text: '----HIGHEST PRICE FROM \n THE AVG. LINE        ----LOWEST PRICE FROM THE AVG. LINE',
            position :'bottom',
            fontStyle: 'bold',
            size: 14,
            fontFamily : 'Poppins',
            fontColor : 'green'

        },
         layout : {
            margin : '100px'
         },
         legend:{
             display : false
         },
         scales: {                    
             xAxes: [
                 {
                 type: 'linear',
                 position: 'bottom',
                 gridLines : {
                     display : false,
                     drawBorder : false     
                 }, 
                 id: 'x-axis-0',
                 display: true,
                 scaleLabel: {
                   display: false,
                   beginAtZero: true,
                   labelString: 'Date'
                 },

                 ticks: {
                     beginAtZero: false,
                     fontFamily : "Poppins",
                     fontColor : "#000",
                     fontStyle : 'bold',
                     padding: 20
                 },                   
             }

         ],
         yAxes: [
             {
                id: 'y-axis-0',
                type: 'linear',
                display: true,
                position: 'left',
                scaleLabel: {
                  display: false,
                  labelString: 'Count',
                },
             gridLines : {
                 borderDash : [10, 10],
                 drawBorder : false,
                 color : '#CACACA',
                 tickMarkLength : 20,

             },
             ticks : {
                 beginAtZero: false,
                 fontFamily : "Poppins",
                 fontColor : "#2e83f2",
                 fontStyle : 'bold',
                 padding: 20,
                 callback: function(value, index, values) {
                 return '$' + value;
                 }
             }
         }
     ]  
    }
   }
 })
}

---

您可以在散点图中再添加一个与绘制现有直线相同的直线图

该图的数据将是气泡{x:bobble coordinal}和线上点{y:point on line}的坐标

---

谢谢，我在散点图中画了另一个线图。

     {
         data: [{
             x: value1,
             y: minimum-value // according to your requirement
         }, {
             x: value1,
             y: average-value
         }
     ],
         borderColor: 'black',
         borderDash : [5,5]
         borderWidth: 1,
         fill: false,
         showLine: true,
         pointRadius : 0,
         datalabels: {
            display: false
        }

     }