javascript - HighCharts - 隐藏/显示鼠标事件标签

Question

我试图隐藏标签并更改鼠标悬停时的边框宽度，并在鼠标移出时将图形返回到其原始状态。 不断显示“未捕获的类型错误:无法读取未定义的属性‘状态’”，我不知道该怎么办。

        var showLabel = function () {
            var options = myChart.options;
            options.xAxis[0].labels.enabled = true;
            options.plotOptions.series.borderWidth = 0;
            myChart = new Highcharts.Chart(options);
        };  
        var hideLabel = function () {
            var options = myChart.options;
            options.xAxis[0].labels.enabled = false;
            options.plotOptions.series.borderWidth = 3;
            myChart = new Highcharts.Chart(options);
        };


        // Make monochrome colors and set them as default for all pies

        Highcharts.getOptions().plotOptions.bar.colors = (function () {
            var colors = [],
                base = Highcharts.getOptions().colors[0],
                i;

            for (i = 0; i < 10; i += 1) {
                // Start out with a darkened base color (negative brighten), and end
                // up with a much brighter color
                colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
            }
            return colors;
        }());

        var myChart = new Highcharts.Chart({
            chart: {
                renderTo: 'graph_capt',
                type: 'bar',
                backgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
            },
            credits:false,
            exporting:false,    

            title: {
                text: ''
            },
            xAxis: {
                categories:['Captação'],
                labels: {
                    //AQUI
                    enabled:true,
                    x: 80,
                    y: 5,
                    style:{
                        color: '#ffffff',
                        fontSize: '12pt',
                    },
                },
                tickWidth: 0,
                tickColor: '#000000',
                gridColor: '#000000',
                gridLineWidth: 0,
                lineWidth: 0,
                visible: true,

            },
            yAxis: {
                labels: {
                  enabled:false
                },              
                min: 0,
                gridLineWidth: 0,
                title: {
                    text: ''                
                }
            },
            tooltip: {
                pointFormat: '<span style="color:black">{series.name}</span>: <b>R$ {point.y}</b> ({point.percentage:.0f}%)<br/>',
                shared: false,
            },
            legend: {
                enabled:false,
            },              
            plotOptions: {
                bar: {
                    stacking: 'percent',
                    allowPointSelect: true,
                    colorByPoint: true,
                    cursor: 'pointer'
                },
                series: {
                    stickyTracking: false,
                    borderColor: '#000000',
                    //AQUI
                    borderWidth: 0,
                    events: {
                        mouseOver: function (event) {
                            console.log('Mouse over');
                            return hideLabel();

                        },
                        mouseOut: function () {
                            console.log('Moused out');
                            return showLabel();

                        }
                    }
                },
            },
            series: [{
                name: 'Poupança',
                data: [1000000]
            }, {
                name: 'Letras',
                data: [75000.75]
            }, {
                name: 'Fundos',
                data: [50545.49]
            }]
        });

JS Fiddle

Answer 1

您应该使用 axis.update 动态更新图表，而不是在每个鼠标事件上重新创建图表。和 series.update 。

最好获取图表容器的事件而不是系列，因为您想要更改图表和系列。

示例:https://jsfiddle.net/aythcvop/

$(function() {
  var showLabel = function(chart) {
    chart.xAxis[0].update({
      labels: {
        enabled: true
      }
    }, false);
    Highcharts.each(chart.series, function(series) {
      series.update({
        borderWidth: 0
      }, false);
    });
    chart.redraw();
    //options.xAxis[0].labels.enabled = true;
    //options.plotOptions.series.borderWidth = 0;
    //myChart = new Highcharts.Chart(options);
  };
  var hideLabel = function(chart) {
    chart.xAxis[0].update({
      labels: {
        enabled: false
      }
    }, false);
    Highcharts.each(chart.series, function(series) {
      series.update({
        borderWidth: 3
      }, false);
    });
    chart.redraw();
    //options.xAxis[0].labels.enabled = false;
    //options.plotOptions.series.borderWidth = 3;
    //myChart = new Highcharts.Chart(options);
  };


  // Make monochrome colors and set them as default for all pies

  Highcharts.getOptions().plotOptions.bar.colors = (function() {
    var colors = [],
      base = Highcharts.getOptions().colors[0],
      i;

    for (i = 0; i < 10; i += 1) {
      // Start out with a darkened base color (negative brighten), and end
      // up with a much brighter color
      colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
    }
    return colors;
  }());

  var myChart = new Highcharts.Chart({
    chart: {
      renderTo: 'graph_capt',
      type: 'bar',
      backgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
    },
    credits: false,
    exporting: false,

    title: {
      text: ''
    },
    xAxis: {
      categories: ['Captação'],
      labels: {
        //AQUI
        enabled: true,
        x: 80,
        y: 5,
        style: {
          color: '#ffffff',
          fontSize: '12pt',
        },
      },
      tickWidth: 0,
      tickColor: '#000000',
      gridColor: '#000000',
      gridLineWidth: 0,
      lineWidth: 0,
      visible: true,

    },
    yAxis: {
      labels: {
        enabled: false
      },
      min: 0,
      gridLineWidth: 0,
      title: {
        text: ''
      }
    },
    tooltip: {
      pointFormat: '<span style="color:black">{series.name}</span>: <b>R$ {point.y}</b> ({point.percentage:.0f}%)<br/>',
      shared: false,
    },
    legend: {
      enabled: false,
    },
    plotOptions: {
      bar: {
        stacking: 'percent',
        allowPointSelect: true,
        colorByPoint: true,
        cursor: 'pointer'
      },
      series: {
        borderColor: '#000000',
        //AQUI
        borderWidth: 0
      },
    },
    series: [{
      name: 'Poupança',
      data: [1000000]
    }, {
      name: 'Letras',
      data: [75000.75]
    }, {
      name: 'Fundos',
      data: [50545.49]
    }]
  });

  $('#graph_capt').on('mouseenter', function() {
  	console.log('hide');
    hideLabel(myChart);
  });

  $('#graph_capt').on('mouseleave', function() {
  	console.log('show');
    showLabel(myChart);
  });
});

<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="graph_capt" style="height:100px"></div>