मुझे लाइन चार्ट में एकल मान प्लॉट करने की आवश्यकता है। वर्तमान में मैं लाइन ग्राफ उद्देश्य के लिए चार्ट.जेएस लाइब्रेरी का उपयोग कर रहा हूं।

डेटा कुछ बार भिन्न होगा, मुझे उस समय डेटा सेट के अंदर एकल डेटा मिलेगा, मुझे लाइन चार्ट में लाइन के साथ एकल मान प्लॉट करने की आवश्यकता है।

मैंने चार्ट.जेएस एनोटेशन प्लगइन के साथ प्रयास किया लेकिन यह मेरी आवश्यकताओं को पूरा नहीं किया। जो ऐसा है जैसे यह ग्राफ क्षेत्र में प्लॉट किए गए बिंदु को ओवरलैप कर रहा है।

कोड जिसे मैंने आजमाया था

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



    console.log("X-Axis array values : "+xaxisArr)
    console.log("Y-Axis array values : "+yaxisArr)
    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()
  }

getRandomData(arraySize) {
  let data = []
  for(var i=1; i<=arraySize; i++) {
    let number = Math.floor(Math.random() * 200) + 1
    data.push({'xaxis':i,'yaxis':number})
  }
  return data
  } 

उपरोक्त कोड के साथ मुझे पसंद आ रहा है

enter image description here

मुझे क्या चाहिए

enter image description here

-1
Lakshmansundeep 1 जून 2020, 14:29

1 उत्तर

सबसे बढ़िया उत्तर

आप एक animation.onComplete फ़ंक्शन परिभाषित कर सकते हैं एकल डेटा मान मौजूद होने की स्थिति में रेखा खींचने के लिए निम्नानुसार है।

animation: {
  onComplete: e => {
    var ctx = chart.chart.ctx;
    var data =  chart.config.data.datasets[0].data;
    if (data[0] == null) {
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0']; 
      var y = yAxis.getPixelForValue(data[1]);         
      ctx.save();           
      ctx.globalCompositeOperation='destination-over';
      ctx.strokeStyle = 'blue'          
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(xAxis.left, y);             
      ctx.lineTo(xAxis.right, y);
      ctx.stroke();
      ctx.restore();       
    }    
  }
},

यह फ़ंक्शन उम्मीद करता है कि data सरणी प्रारूप का होगा [null, <value>, null] यदि कोई एकल मान मौजूद है, अन्यथा डेटा बिंदु को क्षैतिज रूप से केंद्रित करना कठिन होगा (इसे देखें उत्तर)। generateRandomDataSet() फ़ंक्शन को इस तरह से बदलना आप पर निर्भर है कि यह ऐसा डेटा प्रदान करता है।

कृपया नीचे अपना परिवर्तित कोड देखें।

const chart = new Chart('line-chart', {
  type: "line",
  data: {
    labels: ['', 'A', ''],
    datasets: [{
      data: [null, 120, null],
      fill: false,
      backgroundColor: "#0168FF",
      borderColor: "#0168FF",
      pointBackgroundColor: "white",
      pointBorderWidth: 1,
      lineTension: 0,
      pointBorderColor: "blue",
      pointRadius: 4,
    }],
  },
  options: {
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    animation: {
      onComplete: e => {
        var ctx = chart.chart.ctx;
        var data =  chart.config.data.datasets[0].data;
        if (data[0] == null) {
          var xAxis = chart.scales['x-axis-0'];
          var yAxis = chart.scales['y-axis-0']; 
          var y = yAxis.getPixelForValue(data[1]);         
          ctx.save();           
          ctx.globalCompositeOperation='destination-over';
          ctx.strokeStyle = 'blue'          
          ctx.lineWidth = 2;
          ctx.beginPath();
          ctx.moveTo(xAxis.left, y);             
          ctx.lineTo(xAxis.right, y);
          ctx.stroke();
          ctx.restore();       
        }    
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          padding: 20,
          min: 0,
          stepSize: 100
        },
        gridLines: {
          drawBorder: false
        }
      }],
      xAxes: [{
        ticks: {
          display: false
        },
        gridLines: {
          zeroLineColor: "transparent",
          drawBorder: false,
          display: false
        }
      }]      
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="line-chart" height="80"></canvas>
0
uminder 1 जून 2020, 12:50