如何在chartJS中的最大值和最小值之间绘制线？ [英] How to draw lines between minimum and maximum value to average value in chartJS?

问题描述

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

I am creating a scatter chart using chartJS and trying to draw lines between max value and average value, min value and average value. I have used chartjs-plugin-annotation.js to draw line.

我已经通过了 value 和 endvalue 在选项中（注释配置）在chartJS中绘制线条高度。

I have passed value and endvalue in options (annotation configuration) to draw line height in 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;
                 }
             }
         }
     ]  
    }
   }
 })
}

推荐答案

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

You can add one more line graph inside your scatter graph the same as you have drawn the existing line.

该图的数据将为气泡 {x：气泡坐标} 的坐标，并指向线 {y：在线上}

Data for that graph will the co-ordinates of bubble {x: bubble co-ordinate} and point on the line {y: point on the 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
        }

     }

这篇关于如何在chartJS中的最大值和最小值之间绘制线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！