HighCharts绘制折线图

时间 2019-12-06

标签 highcharts 绘制折线繁體版

原文原文链接

这篇是17年12月份在慕课网写的一篇手记，当初项目须要用JavaScript实现折线图...javascript

概述：做为一款出色的交互图制做工具，highcharts有着全面的选项、参数等配置信息。今天我整理了highcharts的全部配置信息和说明，将其制做成表，供你们查询。文章主要包括highcharts的18个选项、参数设置信息，具体有：html

chart、colors、credits、exporting、global、lang、legend、loading、navigation、pane、plotOptions、series、subtitle、title、tooltip、xAxis、yAxis。你还能够进一步了解highcharts的功能，请查看highcharts4深度解析。java

1、获取 Highcharts

你能够经过如下几种方式获取 Highcharts ：jquery

直接引用咱们提供的 CDN 服务，无需下载，高速稳定npm

经过官网下载页面获取资源包，资源包包含全部相关文件的源代码及压缩版本，丰富的实例及使用说明文档，关于下载包的详细文件说明请参考资源包下载及使用json

经过 Npm， Bower 等第三方包管理工具下载ssh

引入 Highcharts工具

Highcharts 最基本的运行只须要一个 JS 文件，即 highcharts.js，以使用 CDN 文件为例，对应的代码是：ui

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>

2、代码实例spa

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Highcharts</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/highcharts.js"></script>
    <script type="text/javascript" src="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>

3、highcharts效果图