所有，最近我发布了一个问题Rotating a donut chart in javascript after it is rendered已回答，目前正在我的应用程序中使用它。但现在我们需要更进一步， Hook 这个 donut 旋转图( Highcharts )以更新/突出显示表格中的相应行。基本上这里的布局。我们在顶部有一个可以旋转的圆环图(现在它顺时针旋转，理想情况下，它应该在两个方向旋转)和底部的表格，基本上是圆环上显示的数据。所以现在当用户旋转 donut 时， donut 的底部应该对应并突出显示下表中的相应行。因此，如果 donut 的底部显示 IE7，则可能会突出显示 IE7 行，依此类推。

我在这里创建了一个示例 fiddle 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>

最佳答案

我想出了工作代码，fiddle 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 计算做了一些假设:

1. series.data[i].angle 是以弧度表示的饼图切片的 Angular 。
2. “ donut ”底部中心的 Angular 为 π/2 弧度。在常规坐标系中它应该是 (3 * π)/2，所以不确定为什么 highcharts 以这种方式定位。

有了这些假设，我的代码似乎就可以工作了。

关于javascript - 在旋转饼图的同时创建一个交互式表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21316554/