HighCharts，通過功能在頁面上調用多個圖表

Question

希望有人可以為我提供幫助，因為在過去兩天已經在尋找解決方案之后，我仍然無法解決。

昨天我決定研究HighCharts的一個新項目，它確實可以滿足我的需求。 但是，我正在嘗試使WordPress插件中的實現選項盡可能干凈，這就是我目前遇到的問題。

該JSFiddle正在運行，並顯示了我希望得到的輸出： http : //jsfiddle.net/golabs/tpKU3/

但是我希望能夠僅通過調用一個函數並提供目標div ID和2個dataArray來創建新圖表。 我的嘗試可以在這里找到： http : //jsfiddle.net/golabs/rstpA/

或在這里查看jscode：

/**
 * However this second section of code does NOT work as nothing is displayed in the container21 div...
 * What am I doing wrong here?
 * I like to be able to create a new chart by only supplying the target div ID and the dataArray's, this
 * to have be able to manage the general settings centrally.
 *
 * This JSFIDDLE is related to: http://jsfiddle.net/golabs/tpKU3/
**/
$(function () {
  var __catergories__ = ['AAA','BBB','CCC','DDD','EEE','FFF','GGG'];

  var getChartConfig = function( renderId, dataArray1, dataArray2 ) {
    var config = {};
    config.chart = {
      renderTo: renderId, polar: true, type: 'line', height: 254, width: 360, className: 'SpiderPolarChart', backgroundColor: 'rgba(101,101,101,.1)'
    };
    config.title = {
      text: ''       
    };
    config.legend = {
      layout: 'horizontal', align: 'center', verticalAlign: 'bottom', y: -3,
    };
    config.credits = {
      enabled: true, text: 'highcharts.com', href: 'http://highcharts.com/', position: {
        verticalAlign: 'bottom',
        x: -11,
      }
    };
    config.pane = {
      startAngle: -90, endAngle: 90, center: ['50%', '93%'], size: 300, background: null
        };
    config.xAxis = {
      categories: __catergories__,
      tickmarkPlacement: 'on', tickPixelInterval: 1, lineWidth: 0, labels: {
        rotation: 'auto',
        distance: 12
      }, showLastLabel: true   
    };
    config.yAxis = {
      gridLineInterpolation: 'circle', gridLineDashStyle: 'LongDash', tickInterval: 1, lineWidth: 0, min: 0, max: 5, ceiling: 5, labels: {
        x: 4, y: 15
      }, showLastLabel: true
    };
    config.exporting = { 
      enabled: false
    };
    config.tooltip = {
      shared: true, pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}</b><br/>'
    };
    config.series = [{
      name: 'Overall Rating', data: dataArray1, color: '#D4A539', type: 'area', pointPlacement: 'on', connectEnds: false, index: 1, legendIndex: 2
      },{
      name: 'Personal Rating', data: dataArray2, color: '#333', type: 'line', pointPlacement: 'on', connectEnds: false, index: 2, legendIndex: 1            
    }];
    return config;
    };

  // ===========================================================================
  charts.push(new Highcharts.Chart(
    getChartConfig( "container21", [1.5,3,2,3,4,1,2], [1,4,1.5,3,2,3,1] )
  ));
});

我已經通過JSHint.com運行了代碼，因此應該解決所有錯別字，因為它目前不顯示任何錯誤。

我希望有人可以引導我朝着正確的方向發展。

干杯!

**更新了指向JSFiddles的鏈接** **已解決問題，請參見下文**

Answer 1

在此jsFiddle（ http://jsfiddle.net/golabs/rstpA/ ）中，您沒有告訴它什么chart 。 您正在嘗試為尚未創建的圖表設置選項，以更新正在傳遞的選項。 這有點倒退。

這是一個快速的“修復”：

  var newChart = new Highcharts.Chart(
    getChartConfig( "container21", [1.5,3,2,3,4,1,2], [1,4,1.5,3,2,3,1] )
  );

現在，我認為最好設置一個全局選項集，然后合並到新的集合中（特定於要構建的圖表），就像在鏈接的SO答案中那樣。 這可能會或可能不會給您帶來更大的靈活性。

Answer 2

圖表未定義。 這是您正在尋找的解決方案嗎？

var charts = [];

charts.push(new Highcharts.Chart(

getChartConfig( "container21", [1.5,3,2,3,4,1,2], [1,4,1.5,3,2,3,1] )

));

http://jsfiddle.net/37Gsv/1/

Answer 3

您可以嘗試以下方法：

var charts = []; 
  var i=0;
    for (i =1; i< 10; i++){
    var o =i.toString();
    charts.push(new Highcharts.Chart(
    getChartConfig( "container2"+o, [1.5,3,2,3,4,1,2], [1,4,1.5,3,2,3,1] )
  ));
  }

測試鏈接： http : //jsfiddle.net/newpiseth/8u0tkkkL/5/