在angular 8中使用chart.js仅激活oncl​​ick点折线图

折线图,当我单击任何特定点时我得到了数据,但问题是我想显示该特定点处于活动状态,而当我单击任何其他点时,第一个点要显示为不活动,第二个点要显示为活动

折线图:

在angular 8中使用chart.js仅激活oncl​​ick点折线图

这是我的折线图代码。

chartClicked(e) {
    var activePoints = this.Linechart.getElementsAtEventForMode(
      e,"point",this.Linechart.options
    );
    var firstPoint = activePoints[0];

    var label = this.Linechart.data.labels[firstPoint._index];
    var value = this.Linechart.data.datasets[firstPoint._datasetIndex].data[
      firstPoint._index
    ];


    let existingPoints = this.Linechart.data.labels;

    var elementIndex = activePoints[0]._index;

    this.abcd = [];

    existingPoints.forEach(element => {
      console.log(this.abcd);
      if (element === label) {
        this.addPointConlor = this.Linechart.data.datasets[0].pointBackgroundColor[
          elementIndex
        ] = "red";
      } else {
        this.addPointConlor = this.Linechart.data.datasets[0].pointBackgroundColor[
          elementIndex
        ] = "blue";
      }
    });

这是我的折线图代码。

lineCart() {
    const abc = [];
    this.Linechart = new Chart("canvasGraph",{
      type: "line",// label : "sagar ",data: {
        // labels: this.Xdata,labels: ["1-10-2019","2-10-2019","3-10-2019","4-10-2019","5-10-2019","6-10-2019","7-10-2019"],datasets: [
          {
            data: [100,150,500,200,111,530,160],// data: this.Ydata,borderColor: "#ed1c24",backgroundColor: "transparent",radius: 5,label: "Request Chart",pointBackgroundColor: this.abcd
            //  fill : 'red',// pointHoverBackgroundColor : 'red',}
        ]
      },options: {
        onClick: this.chartClicked.bind(this),elements: {
          line: {
            tension: 0
          }
        },legend: {
          display: true
        },scales: {
          xAxes: [
            {
              display: true
            }
          ],yAxes: [
            // {
            //   display: true
            // }
            {
              stacked: true
            }
          ]
        }
      }
    });

    // });
  }
lovers_php 回答:在angular 8中使用chart.js仅激活oncl​​ick点折线图

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/2859647.html

大家都在问