堆叠折线图高亮交互

最新推荐文章于 2024-09-13 03:29:10 发布

原创最新推荐文章于 2024-09-13 03:29:10 发布 · 379 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

echarts/highcharts 专栏收录该内容

3 篇文章

订阅专栏

文章介绍了如何在Highcharts中修改默认的图例交互行为，当所有堆叠折线都显示时，点击某一条折线的图例会高亮显示该折线并隐藏其他折线，而不是默认的置灰和消失效果。

今天项目中遇到一个需求，和Highcharts与Echarts默认的交互不同。

想要实现：当所有堆叠折线图中，所有的折线都显示的时候，点击某一条折线的图例，突出显示该折线。

Highcharts、Echarts定义的原有动作：

当堆叠折线图的图例都点亮的时候，点击某一个图例，则当前图例置灰，当前折线消失。如下图：

想要实现的动作：

当堆叠折线图的图例都点亮的时候，点击某一个图例，其它图例置灰，其它折线消失。如下图：

主要代码

懒得解释了，自己看吧

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            /* css 代码  */
        </style>
        <script src="https://code.hcharts.cn/highcharts/highcharts.js"></script>
        <script src="https://code.hcharts.cn/highcharts/modules/exporting.js"></script>
        <script src="https://code.hcharts.cn/highcharts/modules/series-label.js"></script>
        <script src="https://code.hcharts.cn/highcharts/modules/oldie.js"></script>
        <script src="https://code.hcharts.cn/plugins/zh_cn.js"></script>
    </head>
    <body>
        <div id="container" style="max-width:800px;height:400px"></div>
        <script>
            var chart = Highcharts.chart('container', {
              title: {
                  text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
              },
              subtitle: {
                  text: '数据来源：thesolarfoundation.com'
              },
              yAxis: {
                  title: {
                      text: '就业人数'
                  }
              },
              legend: {
                  layout: 'vertical',
                  align: 'right',
                  verticalAlign: 'middle'
              },
              plotOptions: {
                  series: {
                      label: {
                          connectorAllowed: false
                      },
                      pointStart: 2010,
                      events: {
                        legendItemClick: function(e) {
                          var index = this.index;
                          var series = this.chart.series;
                          // 默认除选中折线，其它所有折线图均显示
                          var othershow = true;
                          // 判断其它几个图标是不是均显示的
                          for(var i=0;i<series.length;i++) {
                            if(i !== index){
                              othershow = series[i].visible;
                              if(othershow == false){
                                break;
                              }
                            }
                          }

                          // 当前折线不显示的时候，点击显示
                          if(!series[index].visible) {
                            series[index].show();
                          }else{
                              if(othershow){ // 均显示，突出当前
                                for(var i=0;i<series.length;i++) {
                                    if(i !== index){
                                        series[i].hide();
                                    }
                                }
                              }else{// 没有均显示，隐藏当前
                                series[index].hide();
                              }
                          }

                          return false;
                        }
                      }
                  }
              },
              series: [{
                  name: '安装，实施人员',
                  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
              }, {
                  name: '工人',
                  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
              }, {
                  name: '销售',
                  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
              }, {
                  name: '项目开发',
                  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
              }, {
                  name: '其他',
                  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
              }],
              responsive: {
                  rules: [{
                      condition: {
                          maxWidth: 500
                      },
                      chartOptions: {
                          legend: {
                              layout: 'horizontal',
                              align: 'center',
                              verticalAlign: 'bottom'
                          }
                      }
                  }]
              }
          });

        </script>
    </body>
</html>