如何在chartJS中的最小值和最大值之间绘制平均值？答案

【问题标题】：How to draw lines between minimum and maximum value to average value in chartJS?如何在chartJS中的最小值和最大值之间绘制平均值？
【发布时间】：2019-08-13 06:10:19
【问题描述】：

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

我在options（注解配置）中传递了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;
                 }
             }
         }
     ]  
    }
   }
 })
}

【问题讨论】：

标签： javascript reactjs chart.js

【解决方案1】：

您可以在散点图中再添加一个线图，就像绘制现有线一样。

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

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

     }

【讨论】：

感谢我在散点图中绘制了另一个折线图。