highchart的几种数据组织形式

来源：互联网发布：淘宝退换货说明编辑：程序博客网时间：2024/06/08 02:44

http://www.hcharts.cn/test/index.php?from=demo&p=10

1. categories 单独放在外面

$(function () {    $('#container').highcharts({        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],        title: {            text: 'Monthly Average Temperature',            x: -20 //center        },        subtitle: {            text: 'Source: WorldClimate.com',            x: -20        },        yAxis: {            title: {                text: 'Temperature (°C)'            },            plotLines: [{                value: 0,                width: 1,                color: '#808080'            }]        },        tooltip: {            valueSuffix: '°C'        },        legend: {            layout: 'vertical',            align: 'right',            verticalAlign: 'middle',            borderWidth: 0        },        series: [{            name: 'Tokyo',            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],            type: 'column'        }]    });});

2. categories放在series中

$(function () {    $('#container').highcharts({        title: {            text: 'Monthly Average Temperature',            x: -20 //center        },        subtitle: {            text: 'Source: WorldClimate.com',            x: -20        },        yAxis: {            title: {                text: 'Temperature (°C)'            },            plotLines: [{                value: 0,                width: 1,                color: '#808080'            }]        },        tooltip: {            valueSuffix: '°C'        },        legend: {            layout: 'vertical',            align: 'right',            verticalAlign: 'middle',            borderWidth: 0        },        series: [{            name: 'Tokyo',            data: [['A',7.0], ['B',6.9], ['C',9.5]],            type: 'column'        }]    });});

3. categories放在series中的另外一种形式

series: [{            name: 'Tokyo',            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],            type: 'column'        }]

4. name,x,y 放在一起, 此外还可以放入其它更多参数

data: [{name: 'Point 1',color: '#00FF00',x: 1y: 0}, {name: 'Point 2',color: '#FF00FF',x: 1y: 5}]

参考：

http://www.hcharts.cn/api/index.php#series.data

阅读全文

0 0