<div id="container" style="width: 600px; height: 550px; margin: 0 auto"></div>
<script language="JavaScript">
var beginTime = "2016年12月06日 16:54";
var endTime = "2017年01月06日 16:54";
$(document).ready(function() {
var chart = {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
};
var title = {
text: beginTime+' ~ '+endTime
};
//鼠标显示
var tooltip = {
pointFormat: '{series.name}: <b>{point.y}</b><br/>总调用次数:{point.total}'
};
//饼图外显示
var plotOptions = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f}%'
},
showInLegend: true
}
};
var series= [{
type: 'pie',
name: '调用次数',
data: [
{
name: "逾期平台查询",
y: 100
},
{
name: "人脸比对",
y: 20
},
{
name: "银行帐号认证",
y: 300
},
{
name: "法院公告详情",
y: 4
},
{
name: "名片识别",
y: 50
},
{
name: "营业执照识别",
y: 6
}
]
}];
var json = {};
json.chart = chart;
json.title = title;
json.tooltip = tooltip;
json.series = series;
json.plotOptions = plotOptions;
$('#container').highcharts(json);
});
</script>
- 大小: 171.4 KB
分享到:
相关推荐
最新highcharts,附DEMO,实例源码,jquery等等
Highcharts柱状图显示,柱状图显示颜色不一样
highcharts小demo
highcharts简单的饼图demo,按照需求更改
AspNet Highcharts 中文版,将各英文名翻译成中文,方便查看学习
highcharts demo各种图形,可以与后台交互,
实现各种各样的饼状图,柱状图,折线图
android 调用highcharts.js 实现折线图展示
highCharts 示例 demo highCharts入门 highCharts 自己 按照API文档 写的 几个小例子 另一篇 是一个 fusioncharts 的例子 需要的朋友看看 另外 怎么用highcharts 和 fusioncharts 画 雷达图 ,仪表图 ,会的 朋友 ...
这个里面有关于HighCharts的一些API文档,以及一些小的Demo还有一些属性截图,方便大家使用及学习
Highcharts-6.0.2-demo.zip,仅供学习交流使用,测试了,可以使用 Highcharts-6.0.2-demo.zip,仅供学习交流使用,测试了,可以使用
highcharts_demo,highcharts_demo,highcharts_demo,highcharts_demo
unigui_highcharts_Demo
使用Highcharts实现的图形报表,各种柱形对比图,柱形级别图,单一柱形图,各种功能。
highcharts柱状图
整理了一天终于整理出了异步请求json对象并转化为highcharts的对象数据,绝对实用
Highcharts line Demo
这是highcharts的一个简单demo,主要是以时间作为X轴来实现的
Highcharts 写 venn图 (韦恩图),以及解决项目中venn的报错,Highcharts 写 venn图 鼠标悬浮效果以及点击事件
Highcharts提供的Geojson世界地图数据集的国家名称中文翻译,Vue使用Highcharts实现世界地图的详细介绍来自我的另一篇文章,可供参考,有问题可随时联系,感谢支持: ...