最近在使用Highcharts,使用了显示两种以上的图形展示,要求实现按照不同的图像显示不同提示。
通过tooltip实现:
tooltip: {
formatter: function() { //格式化鼠标滑向图表数据点时显示的提示框
var s;
if (this.point.name) { // 饼状图
s = '<b>' + this.point.name + '</b>: <br>' + this.y+ '万吨(' +Highcharts.numberFormat(this.percentage, 1) + '%)'; //百分比需要格式化成两位'
} else {
s = '' + this.x + ': ' + this.y + '万吨';
}
return s;
}
},
总结下供大家参考。
完整代码如下:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highcharts Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function () { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container' //关联页面元素div#id }, title: { //图表标题 text: '2011年东北三大城市水果消费量统计图' }, xAxis: { //x轴 categories: ['柑橘', '香蕉','苹果', '梨子'], //X轴类别 labels:{y:18} //x轴标签位置:距X轴下方18像素 }, yAxis: { //y轴 title: {text: '消费量(万吨)'}, //y轴标题 lineWidth: 2 //基线宽度 }, tooltip: { formatter: function() { //格式化鼠标滑向图表数据点时显示的提示框 var s; if (this.point.name) { // 饼状图 s = '<b>' + this.point.name + '</b>: <br>' + this.y+ '万吨(' + this.percentage + '%)'; //百分比需要格式化成两位 } else { s = '' + this.x + ': ' + this.y + '万吨'; } return s; } }, labels: { //图表标签 items: [{ html: '水果消费总量对比', style: { left: '48px', top: '8px' } }] }, exporting: { enabled: false //设置导出按钮不可用 }, credits: { text: 'helloweba.com', href: 'http://www.helloweba.com' }, series: [ { type: 'spline', name: '平均值', data: [8.03, 9, 11.6, 17] }, { type: 'spline', name: '快速', data: [12, 23, 31.6, 25] }, { type: 'pie', //饼状图 name: '水果消费总量', data: [{ name: '苹果', y: 60 }, { name: '香蕉', y: 36 },{ name: '橘子', y: 36 }], center: [100, 80], //饼状图坐标 size: 100, //饼状图直径大小 dataLabels: { enabled: true //不显示饼状图数据标签 } }] }); }); }); </script> </head> <body> <script src="js/highcharts.js"></script> <script src="js/modules/exporting.js"></script> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> </body> </html>
实现如下图:
相关推荐
利用highCharts绘制饼图和柱状图
highcharts简单的饼图demo,按照需求更改
一个页面,两个双饼图,至于双饼图长什么样,自己去官网查看
highcharts饼图字段过长超出解决,代码明了,操作简单
主要介绍了Javascript highcharts 饼图显示数量和百分比实例代码的相关资料,这里附有实例代码,需要的朋友可以参考下
带例子,将原来单色变为渐变色,运行电脑时间,不超过2015年1月
本篇文章主要介绍了在Vue中使用highCharts绘制3d饼图的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
使用highcharts实现饼图和曲线图的展示
本文实例讲述了jQuery插件HighCharts绘制2D饼图效果。分享给大家供大家参考,具体如下: 1、实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D...
Highcharts 写 venn图 (韦恩图),以及解决项目中venn的报错,Highcharts 写 venn图 鼠标悬浮效果以及点击事件
php饼图 jquery饼图 highcharts
highcharts 与 struts2 完美整合,解决部分新手对于操作highcharts的误区,本例子无需连接数据库,在strust2 Action中创建模拟数据,以json的方式返回到前台js,highcharts通过解析json,进而完成数据的装配,且可以...
Highcharts 饼图 下表列出了 Highcharts 不同类型的饼图: 序号 图表类型 1 基本饼图 2 显示图例饼图 3 圆环图 4 半圈圆环图 5 向下钻取饼图 6 渐变饼图 7 单色饼图
Highcharts柱状图显示,柱状图显示颜色不一样
ASP.NET 做的3D饼图。 可以2D、3D互转换。 具体代码自己可以看下,做适当的修改。 只是把代码贴出来了。
NULL 博文链接:https://201108223725.iteye.com/blog/2173123
报表显示 highcharts 报表显示 highcharts 报表显示 highcharts