javascript – 在旋转饼图时创建交互式表格

全部,最近我发布了一个问题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这样定向.
有了这些假设,我的代码似乎有效.
 原文链接：https://www.f2er.com/html/426028.html

javascript – 在旋转饼图时创建交互式表格

猜你在找的HTML相关文章