0

https://lh6.googleusercontent.com/-eTP5pEh4kFs/T7BoGRdwlmI/AAAAAAAAAHc/AQzgo6qkBkQ/w1257-h669-k/graph.JPG

$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: '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: {
                    fontSize: '13px',
                    fontFamily: '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: '#FFFFFF',
                align: 'right',
                x: -3,
                y: 10,
                formatter: function() {
                    return this.y;
                },
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    });
});

});

[Help] 如何使用 HighCharts 一个 js 插件来实现这个..？任何评论，建议将不胜感激..

4

1 回答 1

1

我猜你想要的是多个系列。因此，假设您想要“人口（总数）”、“人口（男性）”和“人口（女性）”，您只需将更多系列添加到数组中。

请忽略我的“男性 + 女性 = 总数”数字不加起来的事实。

生成的图表也很忙，但我会把它留给你。通常在创建具有多个系列的条形图时，您会希望条形的数量保持相当小。否则，最好使用折线图或面积图或适合您需要的任何一种（对不起，我不太懂日语）。

但这会指向你想要去的方向。

$(function () {
  var chart;
  $(document).ready(function() {
    chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: '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: {
                fontSize: '13px',
                fontFamily: '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: '#FFFFFF',
            align: 'right',
            x: -3,
            y: 10,
            formatter: function() {
                return this.y;
            },
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
          }
        }
      },
      {
        name: 'Male',
        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: '#FFFFFF',
            align: 'right',
            x: -3,
            y: 10,
            formatter: function() {
                return this.y;
            },
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
          }
        }
      },
      {
        name: 'Female',
        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: '#FFFFFF',
            align: 'right',
            x: -3,
            y: 10,
            formatter: function() {
                return this.y;
            },
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
          }
        }
      }]
    });
  });
});
于 2012-05-14T02:41:49.473 回答