常见的图形库系列
常见的图形库概览-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 使开发人员能够在其网页中轻松设置交互式图表。
中文网站
入门指南
下载
导入 js
Highcharts 依赖于 jquery,因此您可以在您的 HTML 页面中导入它们:
<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
- 创建容器
<div id="highchart-container" style="min-width:800px;height:400px"></div>
- 使用 Highcharts
$(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]}]});
});