Question

我需要帮助，我需要使用SAME渲染创建六个图表，但每个图表中使用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'
                }
             }         
          }]    });

        })

;

Answer 1

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

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

用相同的渲染创建六个图表，不同的数据（高图）

1 个答案: