Highcharts 在图表中重绘系列

Question

我正在构建以下图表

https://jsfiddle.net/marialaustsen/x1s9ndm3/11/

我正在尝试为“全部”按钮创建点击功能，但我不想隐藏其他系列并只显示一个系列，我想在点击 all 时在图表中显示所有系列 按钮。最可扩展的方法就是重新绘制图表，但我不知道如何...... 这应该超级简单...

我试过在点击事件中使用重绘方法

$('#all').click(function () {
chart.redraw();
});

所有代码在这里：

`````
<div id="container1"></div>

<button id="All">All</button>

<button id="2017">2017</button>
<button id="2018">2018</button>
<button id="2019">2019</button>

   $(function() {

   // Apply the grey theme
   Highcharts.setOptions( {
   colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee', ' 
      #55BF3B', '#DF5353', '#7798BF', '#aaeeee'], chart: {
       backgroundColor: {
           linearGradient: {
               x1: 0, y1: 0, x2: 1, y2: 1
           }
           , stops: [ [0, '#f5f5f5'], [1, '#F0F0F0']]
       }
       , style: {
           fontFamily: 'Montserrat'
       }
       , plotBorderColor: '#000066'
   }
   , title: {
       style: {
           color: '#00BFB3', textTransform: 'uppercase', fontSize: '20px'
       }
   }
   , subtitle: {
       style: {
           color: '#007396', textTransform: 'uppercase'
       }
   }
   , xAxis: {
       gridLineColor: '#B5B5B9', labels: {
           style: {
               color: '#007396'
           }
       }
       , lineColor: '#B5B5B9', minorGridLineColor: '#505053', tickColor: '#B5B5B9', title: {
           style: {
               color: '#007396'
           }
       }
   }
   , yAxis: {
       gridLineColor: '#B5B5B9', labels: {
           style: {
               color: '#00BFB3'
           }
       }
       , lineColor: '#B5B5B9', minorGridLineColor: '#505053', tickColor: '#B5B5B9', tickWidth: 1, title: {
           style: {
               color: '#007396'
           }
       }
   }
   , tooltip: {
       backgroundColor: 'rgba(0, 0, 0, 0.85)', style: {
           color: '#F0F0F0'
       }
   }
   , plotOptions: {
       series: {
           dataLabels: {
               color: '#007396', style: {
                   fontSize: '13px'
               }
           }
           , marker: {
               lineColor: '#333'
           }
       }
       , boxplot: {
           fillColor: '#505053'
       }
       , candlestick: {
           lineColor: 'white'
       }
       , errorbar: {
           color: 'white'
       }
   }
   , legend: {
       backgroundColor: 'rgba(62,62,62,1)', itemStyle: {
           color: '#E0E0E3'
       }
       , itemHoverStyle: {
           color: '#FFF'
       }
       , itemHiddenStyle: {
           color: '#606063'
       }
       , title: {
           style: {
               color: '#C0C0C0'
           }
       }
   }
   , credits: {
       style: {
           color: '#666'
       }
   }
   , labels: {
       style: {
           color: '#707073'
       }
   }
   , drilldown: {
       activeAxisLabelStyle: {
           color: '#007396'
       }
       , activeDataLabelStyle: {
           color: '#007396'
       }
   }
   , navigation: {
       buttonOptions: {
           symbolStroke: '#DDDDDD', theme: {
               fill: '#505053'
           }
       }
   }
   , // scroll charts
   rangeSelector: {
       buttonTheme: {
           fill: '#505053', stroke: '#000000', style: {
               color: '#CCC'
           }
           , states: {
               hover: {
                   fill: '#707073', stroke: '#000000', style: {
                       color: 'white'
                   }
               }
               , select: {
                   fill: '#000003', stroke: '#000000', style: {
                       color: 'white'
                   }
               }
           }
       }
       , inputBoxBorderColor: '#505053', inputStyle: {
           backgroundColor: '#333', color: 'silver'
       }
       , labelStyle: {
           color: 'silver'
       }
   }
   , navigator: {
       handles: {
           backgroundColor: '#666', borderColor: '#AAA'
       }
       , outlineColor: '#CCC', maskFill: 'rgba(255,255,255,0.1)', series: {
           color: '#7798BF', lineColor: '#A6C7ED'
       }
       , xAxis: {
           gridLineColor: '#505053'
       }
    }
    , scrollbar: {
       barBackgroundColor: '#808083', barBorderColor: '#808083', buttonArrowColor: '#CCC', 
    buttonBackgroundColor: '#606063', buttonBorderColor: '#606063', rifleColor: '#FFF', 
    trackBackgroundColor: '#404043', trackBorderColor: '#404043'
   }
   });
   // Create the chart
   Highcharts.chart('container1', {
   chart: {
       type: 'column'
   },
   title: {
       text: 'Feedback per quarter grouped by year'
   },
   subtitle: {
       text: 'Source: '
   },
   xAxis: {
       categories: [
           'Q1',
           'Q2',
           'Q3',
           'Q4'
       ],
       crosshair: true
   },
   yAxis: {
       min: 0,
       title: {
           text: 'Total'
       }
   },
   tooltip: {
       headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
       pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
           '<td style="padding:0"><b>{point.y} feedback</b></td></tr>',
       footerFormat: '</table>',
       shared: true,
       useHTML: true
   },
   plotOptions: {
       column: {
           pointPadding: 0.2,
           borderWidth: 0
       }
   },
   series: [{
       name: '2017',
       data: [55, 72, 108, 130]

   }, {
       name: '2018',
       data: [80, 65, 100, 40]

   }, {
       name: '2019',
       data: [45, 34, 67, 24]

   }]
 }, function(chart) {

 // the button action
        $('#all').click(function () {
        chart.redraw()
    })


   $('#2017').click(function() {
     Highcharts.each(chart.series, function(p, i) {
       p.name.includes('2017') ? p.show() : p.hide()
     })
   })
   $('#2018').click(function() {
     Highcharts.each(chart.series, function(p, i) {
       p.name.includes('2018') ? p.show() : p.hide()
     })
   })
   $('#2019').click(function() {
     Highcharts.each(chart.series, function(p, i) {
       p.name.includes('2019') ? p.show() : p.hide()
     })
   })

 });
 });

如何在单击“全部”按钮时重新绘制或重新加载图表？

Answer 1

您需要显示系列并重新绘制图表。最有效的方法是在每个系列上使用 setVisible 方法，将 redraw 参数设置为 false 并在循环外调用 chart.redraw()。

   $('#All').click(function() {
     Highcharts.each(chart.series, function(s, i) {
       s.setVisible(true, false);
     });

     chart.redraw();
   });

现场演示： https://jsfiddle.net/BlackLabel/eztvoqa4/

API参考：

https://api.highcharts.com/class-reference/Highcharts.Chart#redraw

https://api.highcharts.com/class-reference/Highcharts.Series#setVisible

Highcharts 在图表中重绘系列

Highcharts redraw series in chart

charts

click

button

redraw

highcharts