2

请我需要帮助，我需要使用 ajax 调用（jquery）在每个图表中创建六个具有相同渲染但具有不同数据和图表标题的图表，请问我该怎么做？

http://www.highcharts.com/documentation/how-to-use#live-charts 

var chart; $(document).ready(function() {    chart = new Highcharts.Chart({
          chart: {
             renderTo: 'container',
             defaultSeriesType: 'column',
             margin: [ 50, 50, 100, 80]
          },
          title: {
             text: 'World\'s largest cities per 2008'
          },
          xAxis: {
             categories: [
                'Tokyo', 
                'Jakarta', 
                'New York', 
                'Seoul', 
                'Manila',
                'Mumbai',
                'Sao Paulo',
                'Mexico City',
                'Dehli',
                'Osaka',
                'Cairo',
                'Kolkata',
                'Los Angeles',
                'Shanghai',
                'Moscow',
                'Beijing',
                'Buenos Aires',
                'Guangzhou',
                'Shenzhen',
                'Istanbul'
             ],
             labels: {
                rotation: -45,
                align: 'right',
                style: {
                    font: 'normal 13px Verdana, sans-serif'
                }
             }
          },
          yAxis: {
             min: 0,
             title: {
                text: 'Population (millions)'
             }
          },
          legend: {
             enabled: false
          },
          tooltip: {
             formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    'Population in 2008: '+ Highcharts.numberFormat(this.y, 1)
    +
                    ' millions';
             }
          },
               series: [{
             name: 'Population',
             data: [34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18, 
                17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8, 
                11.7, 11.2],
             dataLabels: {
                enabled: true,
                rotation: -90,
                color: Highcharts.theme.dataLabelsColor || '#FFFFFF',
                align: 'right',
                x: -3,
                y: 10,
                formatter: function() {
                   return this.y;
                },
                style: {
                   font: 'normal 13px Verdana, sans-serif'
                }
             }         
          }]    });

        })

;
4

1 回答 1

7

如果您想拥有多个具有不同数据但设置相同的图表，请尝试以下操作：

var charts = [];
var cities = []; //replace with your array of cities, assuming that they aren't part of the changing data

$(document).ready(function() {
    var getChartConfig = function(renderId, title, data) {
        var config = {};
        config.chart = {
             renderTo: renderId,
             defaultSeriesType: 'column',
             margin: [50, 50, 100, 80]
        };
        config.title = title;
        config.xAxis = {
            categories: cities,
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    font: 'normal 13px Verdana, sans-serif'
                }
            }
        };
        config.yAxis = {
            min: 0,
            title: {
                text: 'Population (millions)'
            }
        };
        config.legend = { enabled: false };
        config.tooltip = tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>' +
                    'Population in 2008: '+ Highcharts.numberFormat(this.y, 1) +
                    ' millions';
            }
        };
        config.series = data;

        return config;
    };

    //now, creating a new chart is easy!
    charts.push(new Highcharts.Chart(
        getChartConfig("container", "title", data)
    ))
});
于 2011-06-16T16:24:43.260 回答