>

열 차트에 각 계열에 대한 줄거리가 있습니다. 현재 시리즈는 차트가 표시 될 때만 표시되지만 범례 항목을 클릭하면 해당 항목과 해당 줄거리가 표시되지만 다른 모든 시리즈/줄거리는 숨기는 기능을 추가하고 싶습니다. 현재 코드가있는 바이올린은 다음과 같습니다. https://jsfiddle.net/nhrmc/5d46bL2f/

바이올린은 여기에서 찾을 수 있습니다 : https://jsfiddle.net/nhrmc/5d46bL2f/

var chart = Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yAxis: {
plotLines: [{
  value: 50,
  color: 'red',
  width: 2,
  id: 'plot-line-1'
}]
},
series: [{
events: {
  show: function() {
    chart.yAxis[0].addPlotLine({
      value: 7,
      color: 'red',
      width: 2,
      id: 'plot-line-1'
    });
  },
  hide: function() {
    chart.yAxis[0].removePlotLine('plot-line-1')
  }
},
 data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
type: 'column',
}, {
events: {
  show: function() {
    chart.yAxis[0].addPlotLine({
      value: 75,
      color: 'blue',
      width: 2,
      id: 'plot-line-2'
    });
  },
  hide: function() {
    chart.yAxis[0].removePlotLine('plot-line-2')
  }
},
data: [20, 70, 100, 125, 140, 176.0, 132, 145, 21.4, 191, 96, 54],
type: 'column',
visible: false
}
]
});

범례에서 "Series 2"를 클릭하고 관련 줄거리와 함께 표시하고 Series 1 및 관련 줄거리를 숨길 것으로 예상됩니다. 따라서 하나의 시리즈/플롯 라인 조합 만 표시되어야합니다.

  • 답변 # 1

    legendItemClick 에서  콜백 함수를 사용하면 다른 모든 시리즈와 줄거리를 숨길 수 있습니다.

    plotOptions: {
        series: {
            events: {
                legendItemClick: function() {
                    this.chart.series.forEach(function(s) {
                        if (s !== this && s.visible) {
                            s.hide();
                        }
                    });
                    return !this.visible ? true : false
                }
            }
        }
    }
    
    

    실시간 데모 :https://jsfiddle.net/BlackLabel/os86px7v/

    API 참조 :https://api.highcharts.com/highcharts/plotOptions.series.events.legendItemClick

관련 자료

  • 이전 yii2 사용자 정의 유효성 검사가 작동하지 않습니다
  • 다음 프로그래밍 방식으로 Monaco 편집기에서 텍스트의 위치를 ​​찾는 방법