欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

ECharts和Highcharts 简单教程

程序员文章站 2024-02-13 17:14:04
...

Canvas适用场景Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制

SVG适用场景SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景

ECharts（国内的）        Highcharts（外国）

Highcharts 

Highcharts 是一个用纯JavaScript编写的一个图表库。

Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表

Highcharts 目前支持直线图、曲线图、曲线面积图、面积图、面积范围图、柱状图、条形图、饼图、散点图、气泡图、仪表图等丰富的图表类型。

菜鸟教程在线编辑器可以测试效果，使用时候去查，不记

Highcharts 环境配置

Highcharts 与 jQuery 结合使用，所以在加载 Highcharts 前必须先加载 jQuery 库，然后加载自己库，cdn
<head>
   <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
   <script src="/highcharts/highcharts.js"></script>
</head>

Highcharts 配置语法

第一步：创建 HTML 页面

第二步: 创建配置文件

Highcharts 库使用 json 格式来配置。

$('#container').highcharts(json);
完整的实例(HighchartsTest.htm)：
<!-- 第一步：创建 HTML 页面创建一个 HTML 页面，引入 jQuery 和 Highcharts 库： -->
<html>
<head>
   <meta charset="GBK" />
   <title>Highcharts教程 </title>
   <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
     <!-- id 为 container 的 div 用于包含 Highcharts 绘制的图表。 -->
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script language="JavaScript">
$(document).ready(function() {
    // 为图表配置标题：
   var title = {
       text: '月平均气温'   
   };
   // 为图表配置副标题：
   var subtitle = {
        text: 'Source: runoob.com'
   };
   // 配置要在 X 轴显示的项。
   var xAxis = {
       categories: ['一月', '二月', '三月', '四月', '五月', '六月'
              ,'七月', '八月', '九月', '十月', '十一月', '十二月']
   };
   // 配置要在 Y 轴显示的项。
   var yAxis = {
      title: {
         text: 'Temperature (\xB0C)'
      },
      plotLines: [{
         value: 0,
         width: 1,
         color: '#808080'
      }]
   };   
   // 配置提示信息：
   var tooltip = {
      valueSuffix: '\xB0C'
   }
   // 配置图表向右对齐：
   var legend = {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
   };
   // 配置图表要展示的数据。每个系列是个数组，每一项在图片中都会生成一条曲线。
   var series =  [
      {
         name: 'Tokyo',
         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
            26.5, 23.3, 18.3, 13.9, 9.6]
      }, 
      {
         name: 'New York',
         data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
            24.1, 20.1, 14.1, 8.6, 2.5]
      }, 
      {
         name: 'Berlin',
         data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
            17.9, 14.3, 9.0, 3.9, 1.0]
      }, 
      {
         name: 'London',
         data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
            16.6, 14.2, 10.3, 6.6, 4.8]
      }
   ];
 // 第三步: 创建 json 数据 组合是由配置信息:
   var json = {};

   json.title = title;
   json.subtitle = subtitle;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.tooltip = tooltip;
   json.legend = legend;
   json.series = series;
// 第二步: 创建配置文件Highcharts 库使用 json 格式来配置。
   $('#container').highcharts(json);
});
</script>
</body>
</html>
Highcharts 提供大量的配置选项参数，可以轻松定制符合用户要求的图表

Highcharts 配置选项详细说明

参数配置(属性+事件)

chart.events.load：图表加载事件。

Chart：图表区选项
Color：颜色选项
Title：标题选项
Subtitle：副标题选项
xAxis：X轴选项

Series：数据列选项

…………

Highcharts 异步加载数据曲线图表

通过 jQuery.getJSON() 方法从异步加载 csv 文件












































上一篇： eNSP默认路由+浮动路由

下一篇： Highcharts

推荐阅读