HighCharts，通过功能在页面上调用多个图表

Question

Hopefully someone can help me as I'm stuck at the moment after searching for a solution already for the last 2 days.

I decided to look into HighCharts yesterday for a new project and it does do what I'm after. However I'm trying to make the implementation option into my WordPress plugin as clean as possible and that's where I'm stuck at the moment.

This JSFiddle is working and shows what I like to get as output: http://jsfiddle.net/golabs/tpKU3/

But I would like to be able to create a new chart by just calling a function and supply the target div ID and the 2 dataArray's. My attempt can be found here: http://jsfiddle.net/golabs/rstpA/

or see the jscode here:

/**
 * 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] )
  ));
});

I've run the code through JSHint.com so all typos should be tackled as it doesn't show any errors at the moment.

I hope someone can guide me into the right direction to get this to work.

Cheers!

** Updated the links to the JSFiddles ** ** ISSUE RESOLVED, see below **

Answer 1

In this jsFiddle ( http://jsfiddle.net/golabs/rstpA/ ) you are not telling it what chart is. You are trying to set the options for a chart that you have not created to update the options you are passing. It is sort of backwards.

Here is a quick "fix":

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

Now, I would think it would be better to setup a global option set and then merge in your new set (specific to chart you want to build) as in my linked SO answer. This may or may not give you more flexibility.

Answer 2

charts was not defined. Is this the solution you are looking for?

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

you may try this:

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] )
  ));
  }

test link: http://jsfiddle.net/newpiseth/8u0tkkkL/5/