首页手记 JavaScript系列：HighCharts绘制折线图

JavaScript系列：HighCharts绘制折线图

标签：

Java JavaScript

概述：作为一款出色的交互图表制作工具，HighCharts有着全面的选项、参数等配置信息。为了帮助大家进一步掌握HighCharts，今天我们为大家整理了HighCharts的所有配置信息和说明，将其制作成表，供大家查询。文章主要包括Highcharts的18个选项、参数设置信息，具体有：chart、colors、credits、exporting、global、lang 、legend、loading、navigation 、pane、plotOptions、series 、subtitle、title 、tooltip 、xAxis、yAxis。你还可以进一步了解Highcharts的功能，查看HIghcharts 4深度解析。
一、HighCharts选项和参数详细配置查询表
1、chart ：图表区选项
主要设置图表的类型，图表装载容器名，背景，高度，宽度等图表的整体属性。

2、colors ：数据列颜色选项
主要是数据列颜色设置，比如多条线条中的每个线条颜色。

3、credits ：版权链接选项

4、exporting ：导出及打印选项

5、global ：Highcharts.SetOptions方法调用
全局选项,并不适用于每一个图表。这些选项,如lang选项,必须设置使用Highcharts.setOptions方法。一般用不到，详情请查看API文档。
6、labels ：HTML标签（可放置在图表的任意地方）

7、lang ：语言配置选项
主要配置符号、导出时显示的语句、时间显示语言等。和上面的 global参数有关，即调用Highcharts.SetOptions方法。下表列举常用的选项注意：lang选项其实就是配置一些显示语言，API中都有详细说明。

8、legend ：图例选项，即数据类标示

9、loading: 图表加载选项

10、navigation ：导出按钮选项，配置导出按钮及打印样式等，详见API文档。
11、pane ：极性图表和角仪表选项配置（这两种表是在新版本2.0.1新增加的选项）
12、plotOptions ：数据点选项。分不同图表类型配置不同，下面就常用的选项及spline选项列表如下

13、series ：数据列选项

14、subtitle ：副标题选项。和title配置一样，在title中详细讲解
15、title ：标题选项

16、tooltip ：数据点提示框选项

17、xAxis ：x轴选项

18、yAxis ：y轴选项
和x轴配置相同或类似。

二、代码实例

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Highcharts</title>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery.min.js"></script>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/highcharts.js"></script>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/data.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
    $(document).ready(function() {
        var jsonStr = "{\"sensortype\":\"温度传感器\"," +
                        "\"unit\":\"℃\"," +
                        "\"data\":[{\"value\":[1.00, 1.00, 1.00, 1.00],\"id\":\"最小值\"}," +
                                    "{\"value\":[23.30, 19.30, 31.30, 42.30],\"id\":\"001A01\"}," +
                                    "{\"value\":[50.00, 50.00, 50.00, 50.00],\"id\":\"最大值\"}]," +
                        "\"stime\":[\"2018-03-12 12:50:32\", \"2018-03-12 12:51:37\", \"2018-03-12 12:55:17\", \"2018-03-12 12:57:49\"]}";
        var jsonObj = window.JSON.parse(jsonStr);
        sensortype = jsonObj.sensortype;
        unit = jsonObj.unit;
        var title = {
            text: sensortype
        };
        var subtitle = {
        };
        var chart = {
            backgroundColor: {
                linearGradient: [0, 0, 500, 500],
                stops:[
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(200, 200, 255)']
                ]
            },
            type: 'line'
        };
        var xAxis = {
            title: {
                text: "时间"
            }
        };
        var yAxis = {
            title: {
                text: "单位:"+unit
            }
        };
        var tooltip = {
            shared:true,
            crosshairs:true,
            xDateFormat :  '%Y-%m-%d %H:%M',
        };
        Highcharts.setOptions({
            colors: ['#FFFFCE', 'green', '#FF9797']
        });

        var json = {};
        json.title = title;
        json.subtitle = subtitle;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.chart = chart;
        json.tooltip = tooltip;

        var csv = "";
        var data = {
            csv: csv
        };

        var str = "Time";
        for (var i=0;i<jsonObj.data.length ; i++) {
            var id = jsonObj.data[i].id;
            str += "," + id;
        }

        for (var i=0;i<jsonObj.stime.length ; i++) {
            str += "\n"+jsonObj.stime[i];
            for (var j=0;j<jsonObj.data.length ; j++) {
                str += ","+jsonObj.data[j].value[i];
            }
        }
        data.csv = str;
        json.data = data;
        $('#container').highcharts(json);
    });
</script>
</body>
</html>

三、HighCharts效果图