爱悠闲 > Highcharts入门 前端图表显示

Highcharts入门 前端图表显示

分类: html/css/js  |  作者: rbb317 相关  |  发布日期 : 2015-09-27  |  热度 : 128°

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


1.  引入highcharts

在html中引入highcharts

<script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://code.highcharts.com/modules/exporting.js"></script>


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

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>


2. 基本格式

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

官网demo

HTML中使用一个div装表格

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></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]
        }]
    });
});


</pre><p></p><pre>
以上都是官网的东西。

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



版权声明:本文为博主原创文章,未经博主允许不得转载。