首先get到highcharts.js以及highcharts.css还有其模块文件（支持下载等功能）exporting.js
什么？！你懒得去官网（因为是英文的，所以不想去）下载！
那你可以用npm下载：
npm install highcharts -g如果速度很慢就用cnpm
也可以点击https://www.lxyzh.club/highcharts.js.zip下载
上代码吧：
API文档参考：https://api.highcharts.com/highcharts/exporting
HTML
// 先导入js文件
<link rel="stylesheet" href="/css/highcharts.css">
<script src="/js/highcharts.js"></script>
<script src="/js/exporting.js"></script>// 支持下载功能必须导入
<body class="gray-bg">
<div id="container" style="width:60%;height: 400px"></div>// 定义一个容器，给一个标识（id或者class什么的）
</body>js
// 我这里设置的是一个饼图
$(function () {
var chart = {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
};
var title = {
text: 'Browser m2014'// 标题
};
var tooltip = {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'// 鼠标悬浮显示的提示
};
var plotOptions = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
};
var series= [{
type: 'pie',
name: 'Browser share',// 饼图名字
data: [// 这里定义或用Ajax从后台获取数据填充到此处，后面的数字即代表百分比
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}];
var credits = {
enabled: false //去掉hightchats水印
};
var navigation = {
buttonOptions: {
align: 'right'// 定义下载按钮的位置
}
};
var exporting = {
buttons: {
contextButton: {
enabled: false
},
exportButton: {
text: '下载',// 修改文案
// Use only the download related menu items from the default
// context button
menuItems: [
'downloadPNG',// 这里会默认显示英文，我们可以修改JS中的源码来改成简体汉字，见下面
'downloadJPEG',
'downloadPDF',
]
},
printButton: {
text: '打印',// 修改文案
onclick: function () {
this.print();
}
}
}
};
// 注册
var json = {};
json.chart = chart;
json.title = title;
json.tooltip = tooltip;
json.series = series;
json.credits = credits;
json.navigation = navigation;
json.exporting = exporting;
json.plotOptions = plotOptions;
$('#container').highcharts(json);// 渲染到HTML中去
});至此，一个利用C V大法制造的饼图就完成了。
我们来修改源码（如果你是从我提供的下载链接获取的highcharts可以忽略）：
