主页 / 问题 / 1405261
Accepted
Pashok
Asked:2022-06-30 15:28:47 +0000 UTC2022-06-30 15:28:47 +0000 UTC

将鼠标悬停在高图中的组列上时如何仅隐藏该组的列？

  • 772

默认情况下，悬停会隐藏所有组中的所有其他列。我怎样才能使只有该组中的列在悬停时隐藏？我在文档中找到了悬停事件，并获取了列（左上角），但是如何用它隐藏它？也许通过tooltip什么？

现在如何工作 它现在如何工作的一个例子： 的一个例子：它应该如何工作的一个例子： 示例如何 

chart1 = new Highcharts.Chart({
 chart: {
    renderTo: 'chart_1',
    type: 'column',
    height: 350,
 },

 title: {
    text: 'Планы разработчиков по созданию HTML5 игр с помощью разных инструментов(в %)'
 },
 xAxis: {
    categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
 },
 yAxis: {
    title: {
       text: 'Опрошено'
    }
 },
 /*tooltip: {
   shared: true,
   split: true,
 },*/
 plotOptions: {
   series: {
            point: {
              events: {
                mouseOver: function() {
                  var chart = this.series.chart;
                  if (!chart.lbl) {
                        chart.lbl = chart.renderer.label('')
                            .attr({
                                padding: 10,
                                r: 10,
                                fill: Highcharts.getOptions().colors[1]
                            })
                            .css({
                                color: '#FFFFFF'
                            })
                            .add();
                    }
                    chart.lbl
                        .show()
                        .attr({
                            text: 'x: ' + this.x + ', y: ' + this.y
                        });
                }
              }
            },
            events: {
                mouseOut: function (){
                    if (this.chart.lbl) {
                        this.chart.lbl.hide();
                    }
                }
            }
        },
        column: {
          groupPadding: 0.1,
          pointPadding: 0.1,
          borderWidth: 0,
          events: {
            mouseOver: function() {
              console.log("1");
            }
          }
        }
 },
 series: [{
    name: 'Dev #1',
    data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
 }, {
    name: 'Dev #2',
    data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
 }, {
    name: 'Dev #3',
    data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
 }]
});
.actions, .chart {
    margin: 15px auto;
    width: 820px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="chart_1" class="chart"></div>

javascript highcharts

1 个回答

  1. Best Answer

    解决方案是在网站的英文版上给出的，但并不完全。

    这是一个稍微修改的解决方案：

    Highcharts.chart('chart_1', {
  chart: {
    type: 'column',
    height: 350
  },

  title: {
    text: 'Some text'
  },

  xAxis: {
    categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
  },

  yAxis: {
    title: {
      text: 'Title y'
    }
  },

  plotOptions: {
    series: {
      states: {
        inactive: {
          opacity: 1
        },
        hover: {
          enabled: false
        }
      },
      point: {
        events: {
          mouseOver: function() {
            var point = this,
              chart = point.series.chart,
              allSeries = chart.series,
              category = point.category;
            allSeries.forEach(series => {
              series.points.forEach(point => {
                if ((point.category === category) && (point !== this)) {
                  point.update({
                    opacity: 0.2
                  }, false)
                }
              })
            })
            chart.redraw()
          },
          mouseOut: function() {
            var point = this,
              chart = point.series.chart,
              allSeries = chart.series,
              category = point.category;
            allSeries.forEach(series => {
              series.points.forEach(point => {
                point.update({
                  opacity: 1
                }, false)
              })
            })
            chart.redraw()
          }
        }
      }
    },
    column: {
      groupPadding: 0.1,
      pointPadding: 0.1,
      borderWidth: 0
    }
  },

  series: [{
    name: 'Dev #1',
    data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
  }, {
    name: 'Dev #2',
    data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
  }, {
    name: 'Dev #3',
    data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
  }]

});
    .actions, .chart {
    margin: 15px auto;
    width: 820px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="chart_1" class="chart"></div>

    • 0

相关问题