关于Highcharts.js图表库的使用与举例-CFANZ编程社区

第一部分关于Highcharts.js图表库：

1、简介：Highcharts是一款纯javascript编写的图表库，能够在Web网站或Web应用中添加交互性的图表，现在官方的最新版本为API 文档更新到 5.0.7啦。

2、图表类型丰富：

1	曲线图
2	区域图
3	饼图
4	散点图
5	气泡图
6	动态图表
7	组合图表
8	3D 图
9	测量图
10	热点图
11	树状图(Treemap)

3、兼容性 - 支持所有主流浏览器和移动平台（android、iOS等）。

4、多设备 - 支持多种设备，如手持设备 iPhone/iPad、平板等。

5、免费使用 - 供个人免费学习使用。

6、轻量 - highcharts.js 内核库大小只有 35KB 左右。

7、配置简单 - 使用 json 格式配置

8、动态 - 可以在图表生成后修改。

9、多维 - 支持多维图表

10、配置提示工具 - 鼠标移动到图表的某一点上有提示信息。

11、时间轴 - 可以精确到毫秒。

12、导出 - 表格可导出为 PDF/ PNG/ JPG / SVG 格式

13、输出 - 网页输出图表。

14、可变焦 - 选中图表部分放大，近距离观察图表；

15、外部数据 - 从服务器载入动态数据。

16、文字旋转 - 支持在任意方向的标签旋转

第二部分Highcharts.js图表库的应用：

关于Highcharts.js图表库的使用与举例_javascript

@尔嵘

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>hightcharts.js插件使用</title>
  </head>

  <body>
    <div id="container" style="width:400px;height:400px;border: 1px solid red;margin: 50px auto;"></div>

  </body>
  <script src="js/highcharts.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    var charts = Highcharts.chart('container', {
      // Highcharts 配置
      chart:{
        type:"column"//此处有四个选择
      },
      title: {
        text: '我是标题',
        align: "center",
        style: {
          color: "red",
          fontSize: "30px"
        }
      },
      subtitle: {
        text: '我是副标题'
      },
      xAxis: {
        title: {
          text: '2019五月份'
        },
        plotLines: [{
          color: 'green', //线的颜色，定义为红色
          dashStyle: 'longdashdot', //标示线的样式，默认是solid（实线），这里定义为长虚线
          value: 2, //定义在哪个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
          width: 3 //标示线的宽度，2px
        }],
        plotBands: [{
          from: 2, // 标示带开始值
          to: 4, // 标示带结束值
          label: { // 标示带文字标签配置，详见API
            text:"标识带"
          },
          color: 'gray', // 标示带背景颜色
          borderWidth: "lightgrey", // 标示带边框宽度
          borderColor: "green", // 标示带边框颜色
//          id: , // 标示带 id，用于删除等操作
//          zIndex: , // 标示带层叠，用于调整显示层次
          events: { // 事件，支持 click、mouseover、mouseout、mousemove等事件
            click: function(e) {
              alert("Nice to meet you!")
            },
            mouseover: function(e) {},
            mouseout: function(e) {},
            mousemove: function(e) {}
          }

        }]

      },
      yAxis: {
        title: {
          text: '华为市场分额'
        }
      },
      series: [{
        name: '长江很nice',
        data: [21, 32, 23, 42, 15, 45],
        color: "yellow",
      }, {
        name: '这年轻人，霍',
        data: [11, 22, 43, 32, 55, 15],
        color: "blue"
      }, {
        name: '周杰伦',
        data: [12, 22, 33, 42, 45, 05],
        color: "purple"
      }],
      tooltip: {
        enabled: true
      },
      legend: {
        enabled: true,
        borderColor: "green",
        width: "100%",
        backgroundColor: "pink"
      },
      credits: {
        enabled: true,
        text: "尔嵘/2019.8.6",
        href: "https://www.sogou.com",
        style: {
          fontsizes: "15px",
          color: "lightblue"
        }
      }
    });
  </script>

</html>