常见的图形库系列

常见的图形库概览-00-overview

常见的图形库概览-01-Chart.js 入门例子

常见的图形库概览-03-D3.js 入门例子

HighCharts 交互式图表-01-入门介绍

Plotly 函数图像绘制

ApexCharts 图表入门例子

Victory 图表基于 React，适合 React 项目，支持移动端

Recharts 入门例子

AntV G2 入门例子

图表库 C3.js 入门例子

图表库 Google Charts 入门例子

ECharts-01-图表库系列

HighCharts

Highcharts 使开发人员能够在其网页中轻松设置交互式图表。

中文网站

入门指南

Highcharts 依赖于 jquery，因此您可以在您的 HTML 页面中导入它们：

  [html]
1
2
<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  • 创建容器
  [html]
1
<div id="highchart-container" style="min-width:800px;height:400px"></div>
  • 使用 Highcharts
  [js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(function () {
    $('#highchart-container').highcharts({
        chart: {
            type: 'bar'                           
        },
        title: {
            text: '我的第一个图表'                 
        },
        xAxis: {
            categories: ['苹果', '香蕉', '橙子']   
        },
        yAxis: {
            title: {
                text: 'something'                 
            }
        },
        series: [{
            name: '小明',                          
            data: [1, 0, 4]                        
        }, {
            name: '小红',
            data: [5, 7, 3]
        }]
    });
});

然后，您可以看到：