HighCharts - マウスイベントのラベルを非表示/表示する

Question

私はラベルを隠してマウスの境界線幅を変えようとしていて、グラフを元の状態に戻しています。 "Uncaught TypeError：未定義のプロパティ 'の'状態 'が表示され続け、何をすべきかわかりません。代わりに、各マウスイベントにグラフを再作成する

 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() { 
 
    \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>