三级钻取示例:参看了http://www.cnblogs.com/linn/p/4194288.html这里的文章。
效果查看可以将以下代码,在https://code.hcharts.cn/demos/hhhhDs在线编辑示例里试试。
$(function () { // Create the chart Highcharts.chart('container', { chart: { type: 'column' }, title: { text: '2015年1月-5月,各浏览器的市场份额' }, subtitle: { text: '点击可查看具体的版本数据,数据来源: <a href="https://netmarketshare.com">netmarketshare.com</a>.' }, xAxis: { type: 'category' }, yAxis: { title: { text: '总的市场份额' } }, legend: { enabled: false }, plotOptions: { series: { borderWidth: 0, dataLabels: { enabled: true, format: '{point.y:.1f}%' } } }, tooltip: { headerFormat: '<span style="font-size:11px">{series.name}</span><br>', pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>' }, series: [{ name: '浏览器品牌', colorByPoint: true, data: [{ name: 'Microsoft Internet Explorer', y: 56.33, drilldown: 'Microsoft Internet Explorer' }, { name: 'Chrome', y: 24.03, drilldown: 'Chrome' }, { name: 'Firefox', y: 10.38, drilldown: 'Firefox' }, { name: 'Safari', y: 4.77, drilldown: 'Safari' }, { name: 'Opera', y: 0.91, drilldown: 'Opera' }, { name: 'Proprietary or Undetectable', y: 0.2, drilldown: null }] }], drilldown: { series: [{ name: 'Microsoft Internet Explorer', id: 'Microsoft Internet Explorer', data: [ { name:'v11', y:24.13, drilldown: 'v11' }, { name:'v8.0', y:17.2 }, { name:'v9.0', y:8.11 }, { name:'v10.0', y:5.33 }, { name:'v6.0', y:1.06 }, { name:'v7.0', y:0.5 } ] }, { name: 'Chrome', id: 'Chrome', data: [ [ 'v40.0', 5 ], [ 'v41.0', 4.32 ], [ 'v42.0', 3.68 ], [ 'v39.0', 2.96 ], [ 'v36.0', 2.53 ], [ 'v43.0', 1.45 ], [ 'v31.0', 1.24 ], [ 'v35.0', 0.85 ], [ 'v38.0', 0.6 ], [ 'v32.0', 0.55 ], [ 'v37.0', 0.38 ], [ 'v33.0', 0.19 ], [ 'v34.0', 0.14 ], [ 'v30.0', 0.14 ] ] }, { name: 'Firefox', id: 'Firefox', data: [ [ 'v35', 2.76 ], [ 'v36', 2.32 ], [ 'v37', 2.31 ], [ 'v34', 1.27 ], [ 'v38', 1.02 ], [ 'v31', 0.33 ], [ 'v33', 0.22 ], [ 'v32', 0.15 ] ] }, { name: 'Safari', id: 'Safari', data: [ [ 'v8.0', 2.56 ], [ 'v7.1', 0.77 ], [ 'v5.1', 0.42 ], [ 'v5.0', 0.3 ], [ 'v6.1', 0.29 ], [ 'v7.0', 0.26 ], [ 'v6.2', 0.17 ] ] }, { name: 'Opera', id: 'Opera', data: [ [ 'v12.x', 0.34 ], [ 'v28', 0.24 ], [ 'v27', 0.17 ], [ 'v29', 0.16 ] ] },{ name:"v11", id:"v11", data:[ [ 'v27', 0.17 ], [ 'v29', 0.16 ] ] }], // drilldown:{ // series:[{ // name:"v11", // id:"v11", // data:[ // [ // 'v27', // 0.17 // ], // [ // 'v29', // 0.16 // ] // ] // }] // } } }); });
相关推荐
在本项目"matlab开发-HighChart"中,我们将重点探讨如何利用MATLAB与HighChart结合,创建动态和交互式的图表。HighChart是一个强大的JavaScript库,用于构建高质量的网页图表,其在数据可视化方面表现卓越,尤其适用...
此外,HighChart还提供了强大的交互功能,如点击事件、数据钻取、数据区域缩放等,使用户能够更深入地探索数据。 在实际项目中,HighChart通常与后端服务配合,通过Ajax异步获取数据,动态更新图表。这样,当数据...
HighChart API 是一款强大的JavaScript图表库,用于在Web页面上创建动态、交互式的图表和图形。这个API提供了丰富的选项和功能,使得开发者可以定制各种类型的图表,如柱状图、折线图、饼图、散点图等。下面将详细...
HighChart是一款强大的JavaScript图表库,用于在Web页面上创建各种互动式图表,包括曲线图。在Web开发中,数据可视化是至关重要的,HighChart凭借其丰富的功能和易用性,深受开发者喜爱。以下是对"HighChart曲线图...
HighChart是一款广泛应用于Web开发中的数据可视化库,它以其丰富的图表类型、良好的交互性和美观的样式赢得了开发者们的喜爱。在本文中,我们将深入探讨HighChart控件的核心特性、使用方法以及如何结合源码进行定制...
高charts社区提供了大量插件,如Highcharts Export Server用于服务器端导出,或Drilldown模块实现逐层深入的数据探索。 13. **与其他库集成**: Highcharts可以轻松地与jQuery、AngularJS、React等前端框架集成,...
在"Highchart Demo"这个实例中,我们将深入探讨如何利用Highcharts来制作各种类型的图表,以及相关的JavaScript配置和数据接收格式。 首先,Highcharts支持多种图表类型,如折线图、柱状图、饼图、散点图、面积图等...
### Highcharts中文帮助文档知识点详解 #### Chart图表区选项 Highcharts是一款强大的JavaScript图表库,其图表区选项允许用户精细调整图表的外观和行为。以下是一些关键的配置项: - **backgroundColor**: 设置...
Highcharts提供了一些可选模块,如 exporting(导出图表)、drilldown(下钻)和map(地图)等,通过引入相应模块的JS文件并配置即可启用。 八、Highcharts与其他库的集成 Highcharts可以与jQuery、AngularJS、...
highchart源码
bootstrap+EasyUI+highchart中文参考手册,本人是后端开发,对前端不是很熟悉,所以在做项目的时候采用了这三个技术,因为是框架所以用起来开发前端很方便,果断选择,后端程序员也能开发出漂亮的前端页面了
highchart的一个例子
"Highchart 3 离线 API 完整版"是Highcharts的第三个主要版本的离线文档和资源包,它包含了所有关于Highcharts 3的API接口、方法、配置选项以及示例代码,方便开发者在无网络环境下查阅和学习。 在Highcharts 3中,...
这个压缩包文件的标题“highchart(api)”显然与Highcharts的API使用有关,可能包含了一些关于如何利用Highcharts API来绘制图表的示例或教程。 Highcharts的核心功能包括折线图、柱状图、饼图、散点图等多种图表...
HighChart是一款基于JavaScript的开源图表库,用于在Web应用程序中创建高质量、互动式的图表。它在数据可视化领域具有广泛的应用,尤其在Web开发中深受喜爱。3.0.2是HighChart的一个版本,该版本提供了丰富的图表...
这个"highchart c# demo"示例将指导我们如何在C#后端生成数据,并通过JavaScript在前端展示。 首先,我们需要理解Highcharts的基本结构。Highcharts的核心是HTML5 `<div>`标签,我们在这个标签内插入JavaScript代码...
在这个名为"highchart.rar"的压缩包中,我们很显然会找到与Highcharts相关的代码示例,尤其是关于如何实现Y轴双数据的设置。 在Web开发中,数据可视化是一个至关重要的环节,它能够帮助用户更好地理解复杂的数据...