如何创建网页图表？用highcharts完美解决

224180

Javin 发布于 2012-09-15 5 条评论

如果你正在寻找如何创建图表，那我们这篇文章就是为你准备的。我曾经在网上找了很多的资料，怎样去完美的解决创建图表的方案，让我惊喜的是发现了一个很好的很强悍的Javascript图表库：Highcharts。这是一个纯Javascript库，它主要包括两个部分：Highcharts和Highstock。Highcharts可以为您的网站或Web应用程序提供直观，互动式的图表。目前支持线，样条，面积，areaspline，柱形图，条形图，饼图和散点图类型。Highstock可以为您方便地建立股票或一般的时间轴图表。它包括先进的导航选项，预设的日期范围，日期选择器，滚动和平移等等。

主要的特性有：

兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；
对个人用户完全免费；
纯JS，无BS；
支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；
跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；
提示功能：鼠标移动到图表的某一点上有提示信息；
放大功能：选中图表部分放大，近距离观察图表；
易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；
时间轴：可以精确到毫秒；

我认为在现有的阶段来说，这是最好的方式来为用户表达图表信息了。今天就准备几个例子，分享给大家，一起来见证这精彩的时刻吧。先看看demo效果图，也一并提供附件，有需要的童鞋请猛击！

查看预览下载附件

第一步：HTML

<!-- add scripts -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/gray.js"></script>
<script src="js/main.js"></script>

其实Highcharts也是一个jQuery库，所以在顶部还是要引用jQuery库。在我们的附件里面，gray.js是自定义图表设计。你还可以看到其他的几个小文件：dark-blue.js，dark-green.js，grid.js和skies.js。他们都定义了不同的设计风格。你可以选择其中的一个js文件（本例中是引用了gray.js灰色风格）看不同的图表设计。最后一个文件：main.js这是个初始化代码文件。在我们的演示中提供了不同的图表，让我们看看最终的代码：

<!-- Chart type switchers -->
<div>
    <button id="column">column</button>
    <button id="area">area</button>
    <button id="line">line</button>
    <button id="spline">Spine</button>
    <button id="areaspline">areaspline</button>
</div>

<!-- two different charts -->
<div id="chart_1"></div>
<div id="chart_2"></div>

第二步：CSS

现在的图标是没有任何的样式风格，我们需要给图表加上一些固定的宽度和按钮的样式：

css/main.css

.actions, .chart {
    margin: 15px auto;
    width: 820px;
}
button {
    background: none repeat scroll 0 0 #E3E3E3;
    border: 1px solid #BBBBBB;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 1px 1px #F6F6F6 inset;
    color: #333333;
    font: bold 12px;
    margin: 0 5px;
    padding: 8px 0 9px;
    text-align: center;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 150px;
}
button:hover {
    background: none repeat scroll 0 0 #D9D9D9;
    box-shadow: 0 0 1px 1px #EAEAEA inset;
    color: #222222;
    cursor: pointer;
}
button:active {
    background: none repeat scroll 0 0 #D0D0D0;
    box-shadow: 0 0 1px 1px #E3E3E3 inset;
    color: #000000;
}

第三步：JS

js/main.js

最后，让我们一起看看我们的初始化javascript代码：

// Change Chart type function
function ChangeChartType(chart, series, newType) {
    newType = newType.toLowerCase();
    for (var i = 0; i < series.length; i++) {
        var srs = series[0];
        try {
            srs.chart.addSeries({
                type: newType,
                stack: srs.stack,
                yaxis: srs.yaxis,
                name: srs.name,
                color: srs.color,
                data: srs.options.data
            },
            false);
            series[0].remove();
        } catch (e) {
        }
    }
}

// Two charts definition
var chart1, chart2;

// Once DOM (document) is finished loading
$(document).ready(function() {

    // First chart initialization
    chart1 = new Highcharts.Chart({
     chart: {
        renderTo: 'chart_1',
        type: 'column',
        height: 350,
     },
     title: {
        text: 'Tools developers plans to use to make html5 games (in %)'
     },
     xAxis: {
        categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
     },
     yAxis: {
        title: {
           text: 'Interviewed'
        }
     },
     series: [{
        name: 'Dev #1',
        data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
     }, {
        name: 'Dev #2',
        data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
     }, {
        name: 'Dev #3',
        data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
     }]
    });

    // Second chart initialization (pie chart)
    chart2 = new Highcharts.Chart({
        chart: {
            renderTo: 'chart_2',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            height: 350,
        },
        title: {
            text: 'Pie chart diagram for the first developer'
        },
        tooltip: {
            pointFormat: '<b>{point.percentage}%</b>',
            percentageDecimals: 1
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
         series: [{
         type: 'pie',
            name: 'Dev #1',
            data: [
                ['Processing.js', 5],
                ['Impact.js', 10],
                ['Other', 20],
                ['Ease.js', 22],
                ['Box2D.js', 25],
                ['WebGL', 28],
                ['DOM', 30],
                ['CSS', 40],
                ['Canvas', 80],
                ['Javascript', 90]
            ]
         }]
    });

    // Switchers (of the Chart1 type) - onclick handler
    $('.switcher').click(function () {
        var newType = $(this).attr('id');
        ChangeChartType(chart1, chart1.series, newType);
    });
});

在一开始的时候我定义了一个函数：ChangeChartType，这个函数可以改变我们的图标类型，当我们点击按钮的时候，触发onClick事件，我们称之为ChangeChartType功能的ID属性的值传递到这个函数（如所需的图表类型的名称）。现在，请注意我们如何初始化Highcharts.Chart对象。我们定义了对象，就出现相对应的图标以及类型，当然我们也可以定义X轴和Y轴，更多的可以到官方网站去了解API参考文档。

查看预览下载附件

今天就到这里。我希望这个非常强大的图表highcharts将会对你有帮助。祝你好运，欢迎回来。有不懂的可以给我们留言，我们将一起探讨更多的知识！
译文：script-tutorials（本站在原文基础上增加内容补充）