怎么能获取到 highchart 中选定点的 index · Ruby China
怎么能获取到highchart中选定点的index，如果，当鼠标移到红色位置时，获取index为4 (从左至右)
$(function () {
$('#container').highcharts({
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
tooltip: {
formatter: function() {
var s = '&b&'+ this.x +'&/b&';
$.each(this.points, function(i, point) {
s += '&br/&'+ point.series.name +': '+
point.y +'m';
shared: true
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]}]
自问自答：
自己加的index , 通过this.point.index调用
$(function () {
$('#container').highcharts({
tooltip: {
formatter: function() {
return 'The index for &b&'+ this.x +
'&/b& is &b&'+ this.point.zindex +'&/b&';
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
series: [{
data: [{"zindex":0,"y":16.61},{"zindex":1,"y":33.0},{"zindex":2,"y":207.0},{"zindex":3,"y":329.0}, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
后方可回复, 如果你还没有账号请点击这里 。
共收到 1 条回复HighCharts使用心得 - 星星之火116 - 博客园
燎原之势不可挡
posts - 118, comments - 360, trackbacks - 0, articles - 3
HighCharts使用心得
之前很早的一个项目中使用过highcharts，感觉挺方便的，图表类型也比较丰富，而且还支持数据的下钻，但是如果投入商业使用的话还会有一些版权的问题，所以后来就使用了EChart，这是百度开发的一个开源的图表插件，图表类型也很丰富，而且还有交互，对地图的支持也很好，可以免费的使用。在之前的一篇文章里，已经总结过了，今天主要跟大家分享一下，之前总结的Highcharts的一些使用心得，希望能够对大家有所帮助。
1.& 准备工作------下载HighCharts插件
跟ECharts一样，HighCharts也需要下载相应的插件，不过HightCharts的插件很简单，只有一个highcharts.js文件。可以从HighCharts官网上下载，具体地址如下：
如果需要导出图表，则需要exporting.js文件
如果需要一些特殊的图形呈现，则还需要下载highcharts-more.js
2.& 新建一个解决方案或网站，引用下载的highcharts.js文件，进行图表展示。
在这个过程中，我会逐步的跟大家讲解如何使用highcharts.js进行图表展示。
2.1 新建解决方案（或网站），目录结构如下
一般情况下如果不需要导出图片、且只使用常规的图形，exportting.js和highchart-more.js可以不要，只留一个highcharts.js文件即可。
其中的HighCharts.js文件为我自己总结的使用帮助文件，主要用来配置图表类型、图表数据的处理、格式化等操作，下边会进一步讲解。
&&&&&&&&&&&& 此外需要注意的是这里引用的Jquery文件版本为最近版本，VS里边默认的为1.4.1的版本太低，最新的highcharts需要高版本的jQuery文件。
2.2 HighChart.js文件介绍
在2.1中对此文件有一个初步的介绍，这一小节里专门来介绍这个文件。该文件的主要功能是用来配置各种图表类型的配置项，同时对用户提供的参数进行格式化、图表的呈现等功能。
文件的目录结构如下：
var HighChart = {
ChartDataFormate: {//数据格式化
FormateNOGroupData: function (data) {//处理不分组的数据
var categories = [];
var datas = [];
for (var i = 0; i & data. i++) {
categories.push(data[i].name || "");
datas.push([data[i].name, data[i].value || 0]);
return { category: categories, data: datas };
ChartOptionTemplates: {//图表配置项
Pie: function (data, name, title) {
var pie_datas = HighChart.ChartDataFormate.FormateNOGroupData(data);
var option = {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
RenderChart: function (option, container) {//页面渲染
container.highcharts(option);
完整代码：
//document.write("&script language='javascript' src='/Scripts/jquery-1.11.0.min.js'&&/script&");//引入Jquery(1.8.0以上版本)
//document.write("&script language='javascript' src='/Statics/highcharts.js'&&/script&"); //引入hightcharts引擎
//document.write("&script language='javascript' src='/Statics/exporting.js'&&/script&"); //引入导出图片js
//判断数组中是否包含某个元素
Array.prototype.contains = function (obj) {
var i = this.
while (i--) {
if (this[i] === obj) {
var HighChart = {
ChartDataFormate: {
FormateNOGroupData: function (data) {
var categories = [];
var datas = [];
for (var i = 0; i & data. i++) {
categories.push(data[i].name || "");
datas.push([data[i].name, data[i].value || 0]);
return { category: categories, data: datas };
FormatGroupData: function (data) {//处理分组数据，数据格式：name：XXX，group：XXX，value：XXX用于折线图、柱形图（分组，堆积）
var names = new Array();
var groups = new Array();
var series = new Array();
for (var i = 0; i & data. i++) {
if (!names.contains(data[i].name))
names.push(data[i].name);
if (!groups.contains(data[i].group))
groups.push(data[i].group);
for (var i = 0; i & groups. i++) {
var temp_series = {};
var temp_data = new Array();
for (var j = 0; j & data. j++) {
for (var k = 0; k & names. k++)
if (groups[i] == data[j].group && data[j].name == names[k])
temp_data.push(data[j].value);
temp_series = { name: groups[i], data: temp_data };
series.push(temp_series);
return { category: names, series: series };
FormatBarLineData: function (data, name, name1) {//数据类型：name：XXX，value：XXX，处理结果主要用来展示X轴为日期的具有增幅的趋势的图
var category = [];
var series = [];
var s1 = [];
var s2 = [];
for (var i = 1; i & data. i++) {
if (!category.contains(data[i].name))
category.push(data[i].name);
s1.push(data[i].value);
var growth = 0;
if (data[i].value != data[i - 1].value)
if (data[i - 1].value != 0)
growth = Math.round((data[i].value / data[i - 1].value - 1) * 100);
growth = 100;
s2.push(growth);
series.push({ name: name, color: '#4572A7', type: 'column', yAxis: 1, data: s1, tooltip: { valueStuffix: ''} });
series.push({ name: name1, color: '#89A54E', type: 'spline', yAxis: 1, data: s2, tooltip: { valueStuffix: '%'} });
return { series: series };
ChartOptionTemplates: {
Pie: function (data, name, title) {
var pie_datas = HighChart.ChartDataFormate.FormateNOGroupData(data);
var option = {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
text: title || ''
tooltip: {
pointFormat: '{series.name}: &b&{point.percentage:.1f}%&/b&'
plotOptions: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
showInLegend: true
series: [{
type: 'pie',
name: name || '',
data: pie_datas.data
DrillDownPie: function (data, name, title) {
var drilldownpie_
var option = {
type: 'pie'
text: title || ''
subtitle: {
text: '请点击饼图项看详细占比'
plotOptions: {
dataLabels: {
enabled: true,
format: '{point.name}: {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: name || '',
colorByPoint: true,
data: drilldownpie_datas.fir_data
drilldown: {
series: drilldownpie_datas.series
Line: function (data, name, title) {
var line_datas = HighChart.ChartDataFormate.FormatGroupData(data);
var option = {
text: title || '',
subtitle: {
categories: line_datas.category
text: name || ''
plotLines: [{
color: '#808080'
tooltip: {
valueSuffix: ''
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
series: line_datas.series
Bars: function (data, is_stack, is_stack_percent, name, title) {
var bars_datas = HighChart.ChartDataFormate.FormatGroupData(data);
var option = {
type: 'column'
text: title || ''
subtitle: {
credits: {
enabled: false
categories: bars_datas.category
text: name
tooltip: {
headerFormat: '&span style="font-size:10px"&{point.key}&/span&&table&',
pointFormat: '&tr&&td style="color:{series.color};padding:0"&{series.name};&/td&' +
'&td style="padding:0"&&b&{point.y:.1f}&/b&&/td&&/tr&',
footerFormat: '&/table&',
shared: true,
useHTML: true
plotOptions: {
pointPadding: 0.2,
borderWidth: 0
series: bars_datas.series
var stack_option = {};
if (is_stack && !is_stack_percent) {
stack_option = {
tooltip: {
formatter: function () {
return '&b&' + this.x + '&/b&&br/&' +
this.series.name + ': ' + this.y + '&br/&' +
'Total: ' + this.point.stackT
plotOptions: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
if (!is_stack && is_stack_percent) {
stack_option = {
tooltip: {
pointFormat: '&span style="color:{series.color}"&{series.name}&/span&: &b&{point.y}&/b& ({point.percentage:.0f}%)&br/&',
shared: true
plotOptions: {
stacking: 'percent'
return $.extend({}, option, stack_option);
Pyramid: function (data, name, title) {
var pyramid_datas = HighChart.ChartDataFormate.FormateNOGroupData(data);
var option = {
type: 'pyramid',
marginRight: 100
text: title || '',
plotOptions: {
dataLabels: {
enabled: true,
format: '&b&{point.name}&/b& ({point.y:,.0f})',
color: 'black',
softConnector: true
enabled: false
series: [{
name: name || '',
data: pyramid_datas.data
BarLine: function (data, name, name1, title) {
var barline_datas = HighChart.ChartDataFormate.FormatBarLineData(data);
var option = {
zoomType: 'xy'
text: title || ''
subtitle: {
categories: barline_datas.category
yAxis: [{ // Primary yAxis
format: '{value}',
color: '#89A54E'
text: name || '',
color: '#89A54E'
}, { // Secondary yAxis
text: name1 || '',
color: '#4572A7'
format: '{value}',
color: '#4572A7'
opposite: true
tooltip: {
shared: true
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
series: [{
name: 'Rainfall',
color: '#4572A7',
type: 'column',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
name: 'Temperature',
color: '#89A54E',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: '&C'
RenderChart: function (option, container) {
container.highcharts(option);
2.3 具体的页面展示
2.3.1 饼图
l& 页面引用
&script src="../Scripts/jquery-1.11.0.min.js" type="text/javascript"&&/script&
&script src="../Statics/highcharts.js" type="text/javascript"&&/script&
&script src="../Statics/exporting.js" type="text/javascript"&&/script&
&script src="../Statics/HighChart.js" type="text/javascript"&&/script&
&script type="text/javascript"&
$(function () {
var data = [{ name: 'olive', value: 116 }, { name: 'momo', value: 115 }, { name: 'only', value: 222 }, { name: 'for', value: 324}];
var opt = HighChart.ChartOptionTemplates.Pie(data,'Love-Rate',"饼图示例");
var container = $("#container");
HighChart.RenderChart(opt, container);
l& 效果展示
2.3.2 折线图
l& 页面引用
&script src="../Scripts/jquery-1.11.0.min.js" type="text/javascript"&&/script&
&script src="../Statics/highcharts.js" type="text/javascript"&&/script&
&script src="../Statics/exporting.js" type="text/javascript"&&/script&
&script src="../Statics/HighChart.js" type="text/javascript"&&/script&
&script type="text/javascript"&
$(function () {
var data = [
{ name: '2013-01', group: 'olive', value: 116 },
{ name: '2013-01', group: 'momo', value: 115 },
{ name: '2013-01', group: 'only', value: 222 },
{ name: '2013-01', group: 'for', value: 324 },
{ name: '2013-02', group: 'olive', value: 156 },
{ name: '2013-02', group: 'momo', value: 185 },
{ name: '2013-02', group: 'only', value: 202 },
{ name: '2013-02', group: 'for', value: 34 },
{ name: '2013-03', group: 'olive', value: 16 },
{ name: '2013-03', group: 'momo', value: 51 },
{ name: '2013-03', group: 'only', value: 22 },
{ name: '2013-03', group: 'for', value: 84 }
var opt = HighChart.ChartOptionTemplates.Line(data, 'Love-Rate', "折线图示例");
var container = $("#container");
HighChart.RenderChart(opt, container);
l& 效果展示
2.3.3 柱形图
l& 页面引用
&script src="../Scripts/jquery-1.11.0.min.js" type="text/javascript"&&/script&
&script src="../Statics/highcharts.js" type="text/javascript"&&/script&
&script src="../Statics/exporting.js" type="text/javascript"&&/script&
&script src="../Statics/HighChart.js" type="text/javascript"&&/script&
&script type="text/javascript"&
$(function () {
var data = [
{ name: '2013-01', group: 'olive', value: 116 },
{ name: '2013-01', group: 'momo', value: 115 },
{ name: '2013-01', group: 'only', value: 222 },
{ name: '2013-01', group: 'for', value: 324 },
{ name: '2013-02', group: 'olive', value: 156 },
{ name: '2013-02', group: 'momo', value: 185 },
{ name: '2013-02', group: 'only', value: 202 },
{ name: '2013-02', group: 'for', value: 34 },
{ name: '2013-03', group: 'olive', value: 16 },
{ name: '2013-03', group: 'momo', value: 51 },
{ name: '2013-03', group: 'only', value: 22 },
{ name: '2013-03', group: 'for', value: 84 }
var opt = HighChart.ChartOptionTemplates.Bars(data, '','','Love-Rate', "分组柱形图示例");
var container = $("#container");
HighChart.RenderChart(opt, container);
var opt1 = HighChart.ChartOptionTemplates.Bars(data, true,'','Love-Rate', "堆积柱形图示例");
var container1 = $("#container1");
HighChart.RenderChart(opt1, container1);
var opt2 = HighChart.ChartOptionTemplates.Bars(data, '',true ,'Love-Rate', "堆积百分比柱形图示例");
var container2 = $("#container2");
HighChart.RenderChart(opt2, container2);
l& 展示效果
分组柱形图
堆积百分比图
&&&&& 这里只是列出了常用的一些图表类型，如果有特殊需要的话还可以进行自主的去抽象扩展。后续有时间的话，我也会对新的图表类型进行扩展，还有，关于HighChart里边的数据下钻的功能，这里也没有列出来，个人觉得这种图表的交互，抽象出来意义不是很大，后续再看看吧，有时间的话就再试着弄弄。var companyTrendC
//公司汇总的曲线图
$(document).ready(function () {
companyTrendChart = echarts.init(document.getElementById(‘trendLineChart’));
// 显示标题，图例和空的坐标轴
companyTrendChart.setOption({
text: $.trim($(‘#UnderlyingName’).text()) + ‘收盘价趋势’,
left: ‘center’
tooltip: {
trigger: ‘axis’,
left: ‘left’
//trigger: ‘axis’,
left: ‘left’,
data: [‘收盘价’, ‘收益率’]
toolbox: {
feature: {
saveAsImage: {}
dataZoom: [
//默认控制x轴。
type: ‘slider’, // 这个 dataZoom 组件是 slider 型
// 左边在 0% 的位置。
// 右边在 100% 的位置。
type: ‘inside’,
start: 10,
type: ‘inside’,
yAxisIndex: 0,
type: ‘slider’,
yAxisIndex: 0,
type: ‘category’,
boundaryGap: false,
splitLine: { show: false },
name: ‘日期’,
position: ‘bottom’,
type: ‘value’,
name: ‘单位：人民币’,
text: ‘收盘价’,
color:&#E’
type: ‘value’,
name: ‘收益率’,
text: ‘收益率’,
color:&#A7′
opposite: true
name: ‘收盘价’,
color: &#E’,
type: ‘line’,
name: ‘收益率’,
color: &#A7’,
type: ‘line’,
companyTrendChart.showLoading();
var queryDate = $.trim($(‘#TradeDate’).text());
var trendDays = $.trim($(‘#trendDays’).val());
postTrendChartData(trendDays, queryDate);
$(‘#trendDays’).change(function () {
var queryDate = $.trim($(‘#TradeDate’).text());
var trendDays = $.trim($(‘#trendDays’).val());
companyTrendChart.showLoading();
postTrendChartData(trendDays, queryDate);
function postTrendChartData(trendDays, queryDate) {
$.post(“/WindEquityA/GetWindMarketData”, { days: trendDays, queryDate: queryDate, UnderlyingID: $.trim($(‘#UnderlyingID’).text()) }, function (text, status) {
var tradeDay = text.tradeD
var price = text.
var dailyReturn = text.dailyR
companyTrendChart.hideLoading();
// 填入数据
companyTrendChart.setOption({
data: tradeDay
// 根据名字对应到相应的系列
name: ‘收盘价’,
data: price
name: ‘收益率’,
data: dailyReturn
右轴不起作用
最新评论最近读者标签
博客统计文章：404篇页面：3个分类：8个标签：680个评论：551条用户：1人浏览：1367096次运行：1327天jQuery Chart图表制作组件Highcharts用法详解
作者：郑文亮
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了jQuery Chart图表制作组件Highcharts用法,详细分析了Highcharts插件的功能与具体使用技巧及相关注意事项,需要的朋友可以参考下
本文实例讲述了jQuery Chart图表制作组件Highcharts用法。分享给大家供大家参考，具体如下：
Highcharts是一个制作图表的纯Javascript类库，主要特性如下：
① 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；
② 对个人用户完全免费；
③ 纯JS，无BS；
④ 支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；
⑤ 跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；
⑥ 提示功能：鼠标移动到图表的某一点上有提示信息；
⑦ 放大功能：选中图表部分放大，近距离观察图表；
⑧ 易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；
⑨ 时间轴：可以精确到毫秒
Highcharts下载地址
jquery下载地址
本次介绍是把highcharts中的第一个文件拷贝过来，然后把其他的功能加在了这个文件中，然后查询相关资料，导出图片格式不需要连到官方服务器了，只需要在本地就可以。
&%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="highchart_export_module_asp_net._Default" %&
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&head runat="server"&
&title&Highchart js export module sample&/title&
&!-- 1.引入jquery库 --&
&script src="Javascript/jquery-1.5.1.js" type="text/javascript"&&/script&
&!-- 2.引入highcharts的核心文件 --&
&script src="/js/highcharts.js" type="text/javascript"&&/script&
&!-- 3.引入导出需要的js库文件 --&
&script src="/js/modules/exporting.js" type="text/javascript"&&/script&
&script language="javascript" type="text/javascript"&
$(document).ready(function () {
chart = new Highcharts.Chart({
renderTo: 'container',
defaultSeriesType: 'line', //图表类别，可取值有：line、spline、area、areaspline、bar、column等
marginRight: 130,
marginBottom: 25
text: 'Monthly Average Temperature', //设置一级标题
x: -20 //center
subtitle: {
text: 'Source: ', //设置二级标题
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']//设置x轴的标题
text: 'Temperature (&A°C)' //设置y轴的标题
plotLines: [{
color: '#808080'
tooltip: {
formatter: function () {
return '&b&' + this.series.name + '&/b&&br/&' +
this.x + ': ' + this.y + '&A°C'; //鼠标放在数据点的显示信息，但是当设置显示了每个节点的数据项的值时就不会再有这个显示信息
layout: 'vertical',
align: 'right', //设置说明文字的文字 left/right/top/
verticalAlign: 'top',
borderWidth: 0
exporting: {
enabled: true, //用来设置是否显示‘打印','导出'等功能按钮，不设置时默认为显示
url: "http://localhost:49394/highcharts_export.aspx" //导出图片的URL，默认导出是需要连到官方网站去的哦
plotOptions: {
dataLabels: {
enabled: true //显示每条曲线每个节点的数据项的值
enableMouseTracking: false
series: [{
name: 'Tokyo', //每条线的名称
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]//每条线的数据
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
&form id="form1" runat="server"&
&!--5.导入容器用于显示图表--&
&div id="container" style="width: 900"&
导出的图片格式
可以做到页面展示和导出的图片一致了。
PS：这里再为大家推荐几款代码格式化、美化工具，相信大家在以后的开发过程中会用得到：
在线Javascript代码美化、格式化工具：
Javascript压缩/格式化/加密工具：
XML代码在线格式化美化工具：
json代码在线格式化/美化/压缩/编辑/转换工具：
在线JSON代码检验、检验、美化、格式化工具：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}