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效果圖

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。