HighCharts - Ausblenden/Einblenden von Beschriftungen bei Mausereignissen

Question

Ich versuche, die Beschriftung zu verbergen und die Rahmenbreite mit der Maus zu ändern und den Graphen in den ursprünglichen Zustand zurückzuversetzen. Das "Uncaught TypeError: Kann Eigenschaft nicht lesen 'Zustände' undefined" wird angezeigt und ich weiß nicht, was zu tun ist.

 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

Statt Diagramme auf jedem Mausereignis neu zu erstellen, sollten Sie das Diagramm aktualisieren axis.update und series.update dynamisch mit.

Es wird auch besser sein, Ereignis von Charts Container statt Serien zu erhalten, da Sie das Diagramm und die Serie ändern möchten.

Beispiel: 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() { 
 
    \t console.log('hide'); 
 
    hideLabel(myChart); 
 
    }); 
 

 
    $('#graph_capt').on('mouseleave', function() { 
 
    \t 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>