Highcharts動畫後呈現文字

這是我最後解決的最後一個問題的延續。Highcharts動畫後呈現文字

我想弄清楚如何在動畫完成後呈現圖表上的文字。

我很喜歡這個，但我在努力。文本渲染器功能在最後工作，但如果我放入一個完整的功能，它不會。我現在很困惑。

這是我的小提琴。

$("#profit-chart").highcharts({ 

     lang: { 
      thousandsSep: "," 
     }, 
     chart: { 
      spacingRight: 220, 
      type: "column", 
      width: 1200, 
      style: { 
       fontFamily: "Open Sans, sans-serif" 
      } 
     }, 
     animation: { 
      complete:function(chart) { 
       chart.renderer.text('<span class="bracketed">}</span> <em>Equity Advantage</em>', 800, 84) 
        .css({ 
         color: 'green', 
         fontSize: '24px', 
         x: 200 
        }).add(); 
       } 
     }, 

     legend: { 
      enabled: false 
     }, 
     title: { 
      text: "" 
     }, 
     xAxis: { 
      //minPadding: 20, Not working here 
      //maxPadding:1, Not working here either 
      categories: [ "other business", "somekind of business profit" ], 
      labels: { 
       style: { 
        color: "#333333", 
        fontSize: "15px" 
       } 
      } 
     }, 
     yAxis: { 
      gridLineDashStyle: "longdash", 
      title: { 
       text: "Dollars" 
      }, 
      labels: { 
       enabled: true, 
       formatter: function() { 
        return "$" + Highcharts.numberFormat(this.value, 0, "", ","); 
       } 
      } 
     }, 
     tooltip: { 
      enabled: false 
     }, 

     plotOptions: { 


      column: { 
       stacking: "normal", 
       dataLabels: { 
        enabled: true, 
        color: "white", 
        inside: true, 
        useHTML: true, 
        style: { 
         fontSize: "18px", 
         fontWeight: "600" 
        } 
       } 
      }, 
      series: { 
       pointPadding: 0.05, 
       //groupPadding: 0, this does not work 
      } 
     }, 

     series: [ { 
      color: "#327631", 
      data: [ 0, 850 ], 
      stack: "female", 
      dataLabels: { 
       enabled: true, 
       formatter: function() { 
        if (0 != this.y) return "$" + Highcharts.numberFormat(this.y, 0); 


        else return null; 
       } 
      } 

      }, { 
      color: "#ADC9AD ", 
      data: [ 10000, 10000 ], 
      stack: "female", 
      dataLabels: { 
       enabled: true, 
       formatter: function() { 
        return "$" + Highcharts.numberFormat(this.y, 0); 
       } 
      } 
     }] 
     /* 
     This is where it renders the text - it works but is on screen before animation. 
     //}, 

     function (chart) { // on complete 

         chart.renderer.text('<span class="bracketed">}</span> <em>Equity Advantage</em>', 800, 84) 
          .css({ 
           color: 'green', 
           fontSize: '24px', 
           x: 200 
          }).attr ({ 
           zIndex: 20 
          }) 
          .add(); 


     */ 




    });//End HighCharts Call

來源

2014-10-10 lnickel

你必須使用動畫完成事件想法是正確的，但你擁有了它的錯誤配置選項下。

它應該是下：

plotOptions: { 
    series: { 
     animation: { 
      complete: function() { 
      } 
     } 
    } 
}

更新fiddle。

來源

2014-10-11 16:05:30 Mark

Highcharts動畫後呈現文字

回答

相關問題