世间万象
首页 » JavaScript » highcharts

highcharts

highcharts用来用图形展现数据。

引入highcharts - 代码框架 - 从文件构建图形 - 图形风格 -

包含highcharts

highcharts基于jQuery、MooTools、Prototype这些基础库,因此要引入highcharts,首先得引入这些基础库。

基于jQuery

<script src="/js/jquery.min.js" ></script>
<script src="/js/highcharts.js" ></script>

基于MooTools。

<script src="/js/mootools-yui-compressed.js" ></script>
<script src="/js/adapters/mootools-adapter.js" ></script>
<script src="/js/highcharts.js" ></script>

基于Prototype的方式与MooTools类似,它需要先引入prototype.js和prototype-adapter.js这两个文件。

代码框架

var chart1; // globally available
$(document).ready(function() {
      chart1 = new Highcharts.Chart({
         chart: {
            renderTo: "linechart1",
            type: "line"
         },
         title: {
            text: "Berlinix Traffic Sources"
         },
         xAxis: {
            categories: ["2009", "2010", "2011", "2012"]
         },
         yAxis: {
            title: {
               text: "IP/million"
            }
         },
         series: [{
            name: "Google",
            data: [34,32,41,39]
         }, {
            name: "Yahoo!",
            data: [27,30,33,29]
         }]
      });
   });
        

这段代码创建了一个Highcharts.Chart对象,并对其进行了配置。

从文件构建图形

$(function(){
    var options = {
        chart: {
            renderTo: "datacsv",
            type: "line"
        },
        xAxis: { categories: [] },
        yAxis: { title: { text: "IP/million" } },
        series: []
    };
    $.get("/tmp/highcharts-data.txt", function(data) {
        var lines = data.split("\n");
        $.each(lines, function(lcnt, line) {
            var items = line.split(",");
            if(lcnt == 0) {     // header
                $.each(items, function(icnt, item) {
                    if(icnt > 0) {
                        options.xAxis.categories.push(item);
                    }
                });
            } else {
                var series = {
                    data: []
                };
                $.each(items, function(icnt, item) {
                    if(icnt == 0) { series.name = item; }
                    else { series.data.push(parseFloat(item)); }
                });
                options.series.push(series);
            }
        });
        var chart = new Highcharts.Chart(options);
    });
});

文件的格式非常简单:

$ cat tmp/highcharts-data.txt 
Year,2009,2010,2011,2012
Google,34,32,41,39
Yahoo!,27,30,33,29

实时数据

$(function(){
    var chart;
    function request() {
        $.ajax({
            url: "/js/highcharts-live-data.php",
            success: function(point) {
                var series = chart.series[0];
                var shift = series.data.length > 20;
                chart.series[0].addPoint(point, true, shift);
                setTimeout(request, 1000);
            }
        });
    }

    chart = new Highcharts.Chart({
        chart: {
            renderTo: "livechart",
            events: { load: request }
        },
        xAxis: {
            type: "datatime",
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAixs: {
            minPadding: 0.2, maxPadding: 0.2,
            title: { text: "value", margin: 80 }
        },
        series: [{
            name: "Random data",
            data: []
        }]
    });
});
        

生成数据的server程序非常简单:

<?php

header("Content-type: text/json");

$x = time() * 1000;
$y = rand(0, 100);

$ret = array($x, $y);
echo json_encode($ret);

?>

图形风格

highcharts自带了几种主题风格(themes):

$ ls js/highcharts/js/themes/
dark-blue.js  dark-green.js  gray.js  grid.js  skies.js

使用风格的方式就是引入这些文件:

<script src="/js/themes/gray.js" /></script>

各式图形

饼图

$(function(){
    var chart;
    $(document).ready(function(){
        chart = new Highcharts.Chart({
            chart: {
                renderTo: "piechart",
                type: "pie",
            },
            title: { text: "Pie Chart" },
            tooltip: { 
                pointFormat: '{series.name}:{point.percentage}%' ,
                percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: "pointer",
                    dataLabels: {
                        formatter: function() { return this.point.name + this.percentage + "%"; }
                    }
                }
            },
            series: [{
                name: "Browser share",
                data: [
                    ["IE", 25.0],
                    {
                        name: "Chrome",
                        y: 45.0,
                        sliced: true,
                        selected: true
                    },
                    ["Firefox", 20.0],
                    ["Others", 10],
                ]
            }]
        });
    });
});
        

分享

0