Highcharts入门 前端图表显示

最近又跑去做前端的东西，需要画一个趋势图，听同学推荐使用了highcharts。本文主要针对highcharts入门。

1.  引入highcharts

在html中引入highcharts

如果没有引入了jQuery需要引入

2. 基本格式

我就使用了最简单的一种，在它的官网上可以找到源码

官网demo

HTML中使用一个div装表格

然后在JS部分对表格数据进行填充

$(function() {
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        < pre name = "code"
        class = "javascript" > xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
            ]
        },

        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]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});

以上都是官网的东西。

3. 填入数据

对于懂一些js的人来说，填充数据应该挺简单吧啊。但是LZ真的比较小白啊，用这个的时候已经一年没有碰过js了，而且之前的学习也就是课堂上的学习，没有应用太多次果然记得就不牢固啊。所以LZ填数据的时候觉得很挣扎的。。。

我们对表格填数据的时候呢，一般都是从后台啊什么地方拿回来的数据，所以并不像2中的示例一样，而是应该构造相应的Array或者Object，然后填入表格。

（1）先填一个简单的吧。比如我希望能够填充x轴的坐标数据。这个只需要定义个Array，然后把数据全部放进去，最后给表格就行。

    var cat = new Array(); //一个array装x轴数据
    ...
    cat.push(“Jan”); //装入数据
 

回到表格里面，把2中的

xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

替换成

xAxis: {
                categories: cat
            },

就可以啦~总而言之，就是扔个数组进去。

（2）然后来填表格数据。表格数据整体是一个array，但是每一个元素又是一个object。object的name表示数据含义，value表示值（y轴）。value又是一个array。

比如整体数据：

var seriesData = new Array();

每个元素：

var series = new Object();
series.name = “Lillian";
series.data = new Array();

然后把输入塞到series.data里面，最后把这个series放入seriesData。

特别特别要注意，塞到series.data里面的数据，一定要调用parseFloat。最后为series.data.push(parseFloat(the_data_you_want_to_put_in))

seriesData.push(series);

这样就成功放入了一条线的全部数据啦，继续构造新的series然后放入seriesData可以构造别的线。

最后把数据扔进去，大功告成！

series: seriesData