高图:组合双轴与下钻
Highcharts: Combo Dual Axes with DrillDown
我试图使用组合双轴与钻下,但它不工作,当我点击栏
另一个问题,第二个数据(样条)也需要使用钻取吗?或者我可以只对第一个数据(列)使用它。
这是我的jsfield:http://jsfiddle.net/QDzpj/
和代码,因为我不能离开链接没有它。
$(function () {
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'white'
},false);
chart.redraw();
}
var colors = Highcharts.getOptions().colors;
var categories = ['MSIE', 'Firefox', 'Chrome'],
name = 'Browser brands',
data = [
{
y:49.9,
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
data: [10.85, 7.35, 33.06, 2.81],
color: colors[0]
}
},
{
y:71.5,
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
data: [0.20, 0.83, 1.58, 13.12, 5.43],
color: colors[1]
}
}, {
y:106.4,
drilldown: {
name: 'Chrome versions',
categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
color: colors[2]
}
}];
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar']
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} mm',
style: {
color: '#4572A7'
}
},
opposite: true
}],
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
setChart(name, categories, data);
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y +'%';
}
}
}
},
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Rainfall',
//color: '#4572A7',
type: 'column',
yAxis: 1,
data: data,
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
color: '#89A54E',
type: 'spline',
data: [7.0,6.9, 9.5],
tooltip: {
valueSuffix: '°C'
}
}]
});
});
您的控制台显示您做错了什么。
"Uncaught ReferenceError: chart is not defined "
你所需要做的就是定义图表,例如:
var chart = $("#container").highcharts();
参见示例:http://jsfiddle.net/QDzpj/1/
相关文章:
- 动态更改高图中的系列颜色
- 如何为高图中的区域线创建z索引
- 将高图饼图中的文本居中显示为响应
- 将图表动态添加到组合高图表中
- Javascript FLOT组合条形图;以x轴为字符串的折线图
- 可以对一个图表进行高图深化,反映在另一个图表上
- 如何将数据标签与数据一起传递,以便在高图中的工具提示中显示
- 如何在悬停时更改高图的不透明度
- 升级到 jQuery 1.8 后出现高图缩放问题
- 高图3.0.7是否允许高图
- 指定饼图高图的颜色
- 高图热图:单击按钮或复选框时选择所有单元格
- 高图 - 分组/近似后保持多个系列之间的关系
- 高图折线图:点应该是可点击的,点之间的线不是.这可能吗
- 如何防止高图工具提示弹出隐藏,在图形区域或浏览器窗口上调整大小
- 数据库中的动态样条曲线高图
- 高图:组合双轴与下钻
- 高图线系列不能正确显示堆叠条形组合图
- 在组合图表中改变数据粒度的高图
- 将两个数组合并为高图饼的数组集