插件使用-HighChart

時間 2019-11-10

標籤插件使用 highchart 简体版

原文原文鏈接

1、介紹html

　　讓數據可視化更簡單，兼容 IE6+、完美支持移動端、圖表類型豐富、方便快捷的 HTML5 交互性圖表庫。python

官網（英）：https://www.highcharts.com/downloadjquery

官網（中）：https://www.hcharts.cn/ide

2、使用函數

0、官網demopost

官網-在線實例-Highcharts演示-選擇例子-運行結果/js代碼/html代碼字體

一、例1動畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="container" style="width: 800px;height: 400px;margin:0 auto;">

    <script src="/static/Highcharts-6.0.7/code/highcharts.js"></script>
   <script >
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
        var chart = new Highcharts.Chart('container',{
            title:{
                text:"highcharts 標題",
            },
            xAxis:{  // x軸元素
                categories:["週一","週二","週三"]
            },
            yAxis:{  // y軸標題
                title:{
                    text:"y軸標題"
                }
            },
            series:[{
                name:"beijing",  //  圖1標題
                data:[7.0,6.9,9.5]  // 數據
            },{
                name:"shanghai",  // 圖2標題
                data:[-0.2,0.8,5.7]  // 數據
            }]
        });

    </script>
</body>
</html>

chart.html

二、例2ui

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6 
  7 </head>
  8 <body>
  9 
 10     <div id="container" style="width: 800px;height: 400px;margin:0 auto;">
 11 
 12     </div>
 13     <script src="/static/jquery-3.3.1.js"></script>
 14     <script src="/static/Highcharts-6.0.7/code/highcharts.js"></script>
 15     <script >
 16         Highcharts.setOptions({
 17             global: {
 18                 useUTC: false
 19             }
 20         });
 21         var chart = new Highcharts.Chart('container',{
 22             title: {
 23                 text: "<a href='http://www.baidu.com'>鏈接</a>標題",
 24                 useHTML: true,
 25                 x:20,          //移動的位置，+-：左右
 26                 style: {                         //設置字體樣式
 27                     color: '#ff0000',
 28                     fontSize: '12px',
 29                     fontWeight: 'blod',
 30                     fontFamily: "Courier new"
 31                 }
 32             },
 33             subtitle:{
 34                 text:"副標題",
 35                 align:"right",   //位置
 36             },
 37             chart: {
 38                 events: {
 39                     load: function (e) {
 40                         // 圖標加載時，執行的函數or去後臺取數據
 41                     }
 42                 }
 43             },
 44             credits: {          //右下角廣告
 45                 enable: true,
 46                 position: {
 47                     align: 'left',
 48                     verticalAlign: 'bottom'
 49                 },
 50                 text: '老男孩',
 51                 href: 'http://www.oldboyedu.com'
 52             },
 53 //            tooltip: {                    //Tooltip用於設置當鼠標滑向數據點時顯示的提示框信息
 54 //                    backgroundColor: '#FCFFC5', //背景顏色
 55 //                    borderColor: 'red',  //邊框顏色
 56 //                    borderRadius: 10,    //邊框圓角
 57 //                    borderWidth:3,
 58 //                    shadow: true,         //是否顯示陰影
 59 //                    animation: true,      //是否啓用動畫效果
 60 //                    style: {
 61 //                        color: 'ff0000',
 62 //                        fontSize: '12px',
 63 //                        fontWeight: 'blod',
 64 //                       fontFamily: "Courier new"
 65 //                    }
 66 //            },
 67             tooltip: {              //源碼自定義
 68                 pointFormatter: function (e) {
 69                     var tpl = '<span style="color:' + this.series.color + '">●</span> ' + this.series.name + ': <b>' + this.y + '個</b><br/>';
 70                     return tpl;
 71                 },
 72                 useHTML: true
 73             },
 74             plotOptions: {      //點擊觸發的事件
 75                 series: {
 76                     cursor: 'pointer',
 77                     events: {
 78                         click: function (event) {
 79                             // 點擊某個指定點時，執行的事件
 80                             console.log(this.name, event.point.x, event.point.y);
 81                         }
 82                     }
 83                 }
 84             },
 85 
 86             xAxis:{
 87                 categories:["週一","週二","週三"]
 88             },
 89             yAxis:{
 90                 title:{
 91                     text:"desciption"
 92                 }
 93             },
 94             series:[{
 95                 name:"beijing",
 96                 data:[7.0,6.9,9.5],
 97                 lineWidth:5    //加粗
 98             },{
 99                 name:"shanghai",
100                 data:[-0.2,0.8,5.7]
101             }]
102         });
103 
104     chart.addSeries({name:'henan',data: [2.0,5.5,9.5]});    //新增長一條線,不經常使用
105     // 參數：數值；是否重繪; isShift; 是否動畫
106     chart.series[0].addPoint(6);                            //其中一條線延長
107 
108 
109 
110     </script>
111 
112 </body>
113 </html>

chart.html

三、例3，動態增長值this

在console添加chart.series[0].addPoint([1501689835377.358, 15.9])

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6 
  7 </head>
  8 <body>
  9 
 10     <div id="container" style="width: 800px;height: 400px;margin:0 auto;">
 11 
 12     </div>
 13     <script src="/static/jquery-3.3.1.js"></script>
 14     <script src="/static/Highcharts-6.0.7/code/highcharts.js"></script>
 15     <script >
 16         Highcharts.setOptions({
 17             global: {
 18                 useUTC: false
 19             }
 20         });
 21         var chart = new Highcharts.Chart('container',{
 22             title: {
 23                 text: "<a href='http://www.baidu.com'>test</a>標題",
 24                 useHTML: true,
 25                 x:20,          //移動的位置
 26                 style: {                         //設置字體樣式
 27                     color: '#ff0000',
 28                     fontSize: '12px',
 29                     fontWeight: 'blod',
 30                     fontFamily: "Courier new"
 31                 }
 32             },
 33             subtitle:{
 34                 text:"副標題",
 35                 align:"right",   //位置
 36             },
 37             chart: {
 38                 events: {
 39                     load: function (e) {
 40                         // 圖標加載時，執行的函數or去後臺取數據
 41                     }
 42                 }
 43             },
 44             credits: {          //右下角廣告
 45                 enable: true,
 46                 position: {
 47                     align: 'right',
 48                     verticalAlign: 'bottom'
 49                 },
 50                 text: '老男孩',
 51                 href: 'http://www.oldboyedu.com'
 52             },
 53 //            tooltip: {                    //Tooltip用於設置當鼠標滑向數據點時顯示的提示框信息
 54 //                    backgroundColor: '#FCFFC5', //背景顏色
 55 //                    borderColor: 'red',  //邊框顏色
 56 //                    borderRadius: 10,    //邊框圓角
 57 //                    borderWidth:3,
 58 //                    shadow: true,         //是否顯示陰影
 59 //                    animation: true,      //是否啓用動畫效果
 60 //                    style: {
 61 //                        color: 'ff0000',
 62 //                        fontSize: '12px',
 63 //                        fontWeight: 'blod',
 64 //                       fontFamily: "Courier new"
 65 //                    }
 66 //            },
 67             tooltip: {              //源碼自定義
 68                 pointFormatter: function (e) {
 69                     var tpl = '<span style="color:' + this.series.color + '">●</span> ' + this.series.name + ': <b>' + this.y + '個</b><br/>';
 70                     return tpl;
 71                 },
 72                 useHTML: true
 73             },
 74             plotOptions: {      //點擊觸發的事件
 75                 series: {
 76                     cursor: 'pointer',
 77                     events: {
 78                         click: function (event) {
 79                             // 點擊某個指定點時，執行的事件
 80                             console.log(this.name, event.point.x, event.point.y);
 81                         }
 82                     }
 83                 }
 84             },
 85 
 86             xAxis:{
 87                 type: 'datetime',
 88                     labels: {
 89                         formatter: function () {
 90                             return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.value);
 91                         },
 92                         rotation: 30
 93                     }
 94             },
 95             yAxis:{
 96                 title:{
 97                     text:"desciption"
 98                 }
 99             },
100             series:[{
101                 name:"beijing",
102                 data:[7.0,6.9,9.5],
103                 data: [
104                 [1501689804077.358, 8.0],
105                 [1501689814177.358, 6.9],
106                 [1501689824277.358, 16.9],
107                 [1501689834377.358, 11.9]
108                 ]
109             },{
110                 name:"shanghai",
111                 data: [
112                 [1501689804077.358, 12.0],
113                 [1501689814177.358, 10.9],
114                 [1501689824277.358, 5.9],
115                 [1501689834377.358, 6.9]
116                 ]
117             }]
118         });
119 
120     // chart.addSeries({name:'henan',data: [2.0,5.5,9.5]});    //新增長一條線,不經常使用
121     // 參數：數值；是否重繪; isShift; 是否動畫
122     // chart.series[0].addPoint(6);                            //其中一條線延長
123 
124 
125 
126     </script>
127 
128 </body>
129 </html>