全部,最近我发布了一个问题Rotating a donut chart in javascript after it is rendered已被回答,我目前正在我的应用程序中使用它.但现在我们需要更进一步,并将这个甜甜圈旋转图表(高图表)挂钩以更新/突出显示表格上的相应行.基本上这是布局.我们在顶部有一个可以旋转的圆环图(现在它顺时针旋转,理想情况下,它应该在两个方向旋转)和底部的桌子,这基本上是甜甜圈上显示的数据.因此,现在当用户旋转甜甜圈时,甜甜圈的底部应对应并突出显示下表中的适当行.所以可能,如果甜甜圈的底部是IE7,那么行IE7应该突出显示等等.
我有一个样本小提琴在这里创建http://jsfiddle.net/skumar2013/hV9aw/1/供参考.有人可以分享一些关于如何做到这一点的想法/样本吗？一如既往地感谢您的帮助.
$(function () {
$('#mouseMoveDiv').mousemove(function () {
var theChart = $('#container').highcharts();
var currStartAngle = theChart.series[0].options.startAngle;
console.log('currStartAngle: ' + currStartAngle);
var newStartAngle = currStartAngle + 5;
if (newStartAngle > 359) {
newStartAngle = 5;
}
console.log(newStartAngle);
theChart.series[0].update({
startAngle: newStartAngle
});
});
var chart = new Highcharts.Chart({
chart: {
spacingTop: 50,spacingBottom: 50,spacingLeft: 50,spacingRight: 50,height: 500,width: 500,renderTo: 'container',type: 'pie'
},title: {
text: 'Interactive Pie Chart'
},plotOptions: {
pie: {
center: ["50%","50%"],startAngle: 90,animation: false,innerSize: '30%'
}
},series: [{
data: [
['Firefox',44.2],['IE7',26.6],['IE6',20],['Chrome',3.1],['Other',5.4]
]
}]
});
});
最佳答案
我想出了工作代码,小提琴here,但我不知道为什么:)
var someData = theChart.series[0].data; // the pie data
var N = someData.length;
var closest = [10,-1];
for (var i = 0; i < N; i++){
var center = someData[i].angle; // seems to be the center of the pie slice in radians
var dis = Math.abs(center - 1.5795); // 1.5796 seems to be the center bottom of the pie in radians?
if (dis < closest[0]){
closest = [dis,i]; // find the closest slice to the bottom
}
}
// color the corresponding row
if (closest[1] != lastHighlight){
var someRows = $('#dataTable tr');
someRows.eq(lastHighlight).css('backgroundColor','white');
someRows.eq(closest[1]).css('backgroundColor','yellow');
lastHighlight = closest[1];
}
我在这里做一些关于highcharts计算的假设：
>该series.data [i] .angle是以弧度表示的饼图切片的角度.
>底部的角度,“甜甜圈”的中心是π/ 2弧度.在常规坐标系中它应该是(3 *π)/ 2,所以不确定为什么highcharts这样定向.
有了这些假设,我的代码似乎有效.
