插件使用-HighChart

一、介绍

　　让数据可视化更简单，兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库。

官网（英）：https://www.highcharts.com/download

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

二、使用

0、官网demo

官网-在线实例-Highcharts演示-选择例子-运行结果/js代码/html代码

插件使用-HighChart

1、例1

插件使用-HighChart

<!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