Question

全部，最近我发布了一个已回答的问题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]
            ]
        }]
    });
});

    <Title>Interactive pie/donut chart</Title>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <div id="mouseMoveDiv">
    <div id="container" style="height: 500px; width: 500px"></div>
    </div>
    <table border='1' width='100%'>
    <tr>
        <td>Firefox</td>
        <td>44.2%</td>
    </tr>
    <tr>
        <td>IE7</td>
        <td>26.6%</td>
    </tr>
    <tr>
        <td>IE6</td>
        <td>20%</td>
    </tr>
    <tr>
        <td>Chrome</td>
        <td>3.1%</td>
    </tr>
    <tr>
        <td>Other</td>
        <td>5.4%</td>
    </tr>
    </table>

Answer 1

我提出了工作代码，小提琴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这样定向。

根据这些假设，我的代码似乎有效。

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

1 个答案: