点击时需要突出显示HighCharts中的各个列

vfhzx4xs 于 9个月前发布在 Highcharts

关注(0)|答案(1)|浏览(85)

所以基本上，上面是网页上的参考想法，所以前4个是每个人的highchart的图表，其中有一个代码一样

this.chart2 = new Chart(
      {
        chart: {
          type: 'column',
        },
        title: {
          text: '<b>' + "Title " + '</b>',
        },
        legend: {
          enabled: false,
        },
        tooltip: {
          formatter: function () {
            
            return '<b>' + this.point.name + ':</b> ' + this.point.y + '%' + '<br><b>'  + "Lines to Cover:" +'</b>'+ this.point.l;
          }
        },
        xAxis: {
          categories: ['A','B,'C','D'],
          type: 'CVS',
        },
        yAxis: {
          min:0,
          max:100
        },
        plotOptions: {
          series: {
            events: {
              click: function (event) {
                console.log(this.chart.tooltip.chart.hoverPoint.name)
                console.log("s",this.chart.tooltip.chart.hoverPoint.name.split(' ')[1].toString())
                self.drawComponentChart(this.chart.tooltip.chart.hoverPoint.name)
              }

            }
          },
          column: {
            dataLabels: {
              formatter: function () {
                return this.point.y + '%';
              },
              enabled: true,
              style: {
                color: 'white',
                fontWeight: 'normal'
              },
            },
            showInLegend: true
          },

        },
        series: this.model2,
        //-------export chart-------------//
      exporting:{
        buttons: {
          contextButton: {
              menuItems: ['downloadCSV', 'downloadXLS', 'downloadPDF', 'separator', 'label']
          }
      }
     
      },
// ----------------------------------//
      }
    )

正如你所看到的，点击每一列，它会绘制下面的图表，这是该特定列的组成部分。
所以我需要的是，我需要找到一种方法来突出显示我在上面4个图表中的任何一个中单击的列，以便有一种方法可以知道下面的组件图表中显示的是哪一列的组件。
我尝试使用allowPointSelect，但这会使列变灰。我只是想在列上点击时，也找到一种方法来突出显示只有一个点击列4图表以上的边界线。使用的版本：“@angular/cli”：“~6.2.9”，“Angular - highcharts ”：“^6.2.6”，“highcharts”：“^6.2.0”

highcharts

来源：https://stackoverflow.com/questions/76867483/need-to-highlight-individual-columns-in-highcharts-when-clicked

1条答案

按热度按时间

7qhs6swi1#

您可以使用allowPointSelect，并使用plotOptions.series.point.events.select()回调函数添加自定义选择逻辑，该函数从其他系列中删除点（删除它们），并且在选择点时，背景不会通过使用plotOptions.series.states.select属性设置样式将背景更改为灰色

plotOptions: {
  series: {
    allowPointSelect: true,
    states: {
      select: {
        color: undefined,
        borderColor: 'red'
      }
    },
    point: {
      events: {
        select: function() {
          const selected = this,
           group = selected.series.chart.userOptions.selectGroup;

          Highcharts.charts.forEach(chart => {
            if (chart && chart.userOptions.selectGroup === group) {
              const allSelectedPoints = chart.getSelectedPoints();
              allSelectedPoints.forEach(point => {
                if (point !== selected) point.select(false);
              });
            }
          })
        }
      }
    }
  }
}

Demo：https://jsfiddle.net/BlackLabel/89qsk13t/
API：https://api.highcharts.com/highcharts/plotOptions.series.point.events.select

https://api.highcharts.com/highcharts/plotOptions.series.states.select

Angular demo：https://stackblitz.com/edit/highcharts-angular-multi-charts-selection

赞(0）回复(0）举报 9个月前