2015-09-10 16 views
0

我已創建Pie Chart,使用Highcharts。我有一個title,我需要在標題中注入數據系列的名稱。所以它是這樣的:如何將高圖系列傳遞給高圖標題?

title: { 
    text: 'Data name: {name}', 
    align: 'center', 
    useHTML: true, 
    verticalAlign: 'middle', 
    y: -70 
}, 

series: [{ 
    type: 'pie', 
    name: 'Some name to be injected inside the title', 
    innerSize: '70%', 
    data: [] 
}] 

有沒有可能這樣做?

回答

1

我會通過首先識別或檢索系列名稱並將其分配給要在圖表配置選項中使用的變量來執行此操作。

無論您使用哪種方法來檢索或處理圖表系列對象的數據,都應該能夠爲您提供獨立使用的名稱。

像:

//process data... 
var seriesData = [['Group A', 1598],['Group B', 872],['Group C', 321]]; 
var seriesName = 'Chart Series Name'; 

$(function() { 
    $('#container').highcharts({ 
     chart  : { type : 'pie' }, 
     title  : { text : seriesName }, 
     subtitle : { text : null }, 
     tooltip  : { }, 
     plotOptions : { }, 
     series  : [{ 
      name : seriesName, 
      data : seriesData 
     }] 
    }); 
}) 

例子:

0

沒有直接的方法來做到這一點。我建議使用highcharts的Load事件:

chart: { 
     /* some other code */ 
     events: { 
      load: function() { 
       //collect information 
       var title_old = this.title.textStr, 
        title_new, 
        substitute= this.series[0].name, 
        needle = '{name}'; 
       //replaceing 'needle' with 'substitute' 
       title_new = title_old.replace(needle,substitute); 
       //set title 
       this.setTitle({ text: title_new}); 
      } 
     } 
    } 

提示:

  • 只適用,如果你有一個系列(見代碼:系列[0]
  • 與Highcharts測試JS v4.1.8(2015年8月20日)
  • 約String.prototype.replace信息()看看這裏[1]

[1]:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

+0

你可以注入,而圖表調用您可以傳遞名作爲參數,並以圖表的配置使用該名稱 –

+0

我明白這個問題不同。如果你確實知道jlbriggs給出的解決方案是合適的,但是,如果您使用Ajax並且事先不知道系列名稱,則可以使用上面給出的解決方案。 http://jsfiddle.net/84ek687h/6/ – Luxx

+0

Luxx - 我的觀點是,你不必提前「知道」它。如果您要返回包含系列名稱的ajax數據,則可以在構建圖表之前將其拉出並作爲標題發送到圖表(如果要動態更改圖表,則更新它)。無論哪種方式,通過分離圖表配置和數據處理,您都有很大的靈活性來動態執行此操作。 – jlbriggs