用相同的渲染，不同的数据创建六个图表（高图） [英] Create six chart with the same rendering,different data (highchart )

问题描述

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

Please I need help , I need to create six chart with the SAME rendering but with different data AND chart title in each chart with ajax call(jquery) , how can I do this please ?

http://www.highcharts.com/文档/如何使用＃实时图表

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

        })

;

推荐答案

如果您想要使用不同数据的多个图表，但相同的设置，尝试像这样：

If you want to have multiple charts with different data, but the same setup, try something like this:

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

这篇关于用相同的渲染，不同的数据创建六个图表（高图）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！