Highchart js点击旋转并展开弧线 [英] Highchart js click rotate and expand arc

问题描述

您好我正在创建一个带有高图表的js的饼图，它扩展了双层，并且每当我点击一个部分时就旋转到中心。

到目前为止，我有一个展开一层的饼图和一个将弧引到中心（-90）的点击功能。我还有一个点击功能，可以逐个旋转馅饼。我的内弧停留在中心，我很难将弧移动到外环的相同位置。内部的弧线不会跟随点击旋转。

我想制作一个平滑旋转到中心（-90）并用两个额外图层扩展的饼图。随着内部拱门跟随外部拱门并与外部拱门处于相同的起点

预先感谢您

这里是我的代码执行和看起来像：

这是我的脚本

<$> p $ p $ $（function（）{

var lastHighlight = -1;
var lastPos = [10,10,10];
$ （'#mouseMoveDiv'）。click（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：newSta rtAngle
}）;
var someData = theChart.series [0] .data;
var N = someData.length;
var highLight = -1; （var i = 0; i var startAngle = someData [i] .angle +（（（someData [i] .percentage / 100）* 6.28318）/ 2 ）;
var dis = 1.5795 - startAngle;
if（lastPos [i]> 0&& dis< 0）{
highLight = i;
lastPos [i] = dis;
休息;
}
lastPos [i] = dis;
}
if（highLight！= -1）{
var someRows = $（'＃dataTable tr'）;
someRows.eq（lastHighlight）.css（'backgroundColor'，'white'）;
someRows.eq（highLight）.css（'backgroundColor'，'yellow'）;
lastHighlight = highLight;
}
}）;



$（'＃container'）。highcharts（{






$ b图：{
类型：'pie'，
plotBackgroundColor：null，
plotBorderWidth：null，
plotShadow：false
} ，

plotOptions：{
系列：{
dataLabels：{
启用：true，
格式：'{point.name}'，
center：[50％，50％]，
connectorWidth：0，
startAngle：90，
animation：false
}
}
}，

导出：{
启用：false
}，
工具提示：{
启用：false
}，
学分：{
启用：false
}，
标题：{
text：null
}，




系列：[{
类型：'pie'
数据：[
{name：'计划'，y：33.3}，
{名称：'Sprints'，y：33.3}，
{名称：'Release'，y：33.3}
]，

size：'60％'，
innerSize：'40％'，
point：{
events：{
click：function（）{
var chart = this.series.chart，
series = chart.series，
len = series.length，
index = this.x + 1，
i;
for（i = 1; i< len; i ++）{
if（i === index）{
series [i] .update（{
size：' 100％'，
dataLabels：{
enabled：true
}
}，false）;
} else {
series [i] .update（{
size：'0％'，
dataLabels：{
enabled：false
}
}，false）;
}
}
var points = this.series.points;
var startAngle = 0;
for（var i = 0; i< points.length; i ++）{
var p = points [i];
if（p == this）{
break;
}
startAngle + =（p.percentage / 100.0 * 360.0）;
}
this.series.update（{
startAngle：-startAngle + 90 - （（this.percentage / 100.0 * 360.0）/ 2）// center at 180
} ）
chart.redraw（）;
}

}
}，
dataLabels：{
distance：90，//距离名称
style：{
颜色：'黑'
}，
启用：true
}，

zIndex：1
}，

{
zIndex：0，
类型：'pie'，
size：'60％'，
innerSize：'0％'，


data：[{
y：2，
color：'rgba（250,0,0,1）'，
name：'Training'

} ，
{
y：2，
color：'rgba（250,0,0,1）'，
名称：'Secure'
}，
{
y：8，
color：'rgba（0,0,0,0）'，
dataLabels：{
enabled：false
}

}]，
dataLabels ：{
distance：-30，
enabled：false，
style：{
color：'black'
}
}，
enableMouseTracking：false
}，


{
zIndex：0，
类型：'pie'，
大小：'0％' ，
data：[{
y：3，
color：'rgba（0,0,0,0）'，
dataLabels：{
enabled：false
}
}，{
y：1，
color：'rgba（0,200,0,1）'，
name：'tes t'
}，{
y：1，
color：'rgba（0,200,0,1）'，
名称：'test'
}，{
y：1，
color：'rgba（0,200,0,1）'，
名称：'test'
}，{
y：3，
color：'rgba（0,0,0,0）'，
dataLabels：{
enabled：false
}
}]，
dataLabels：{
distance：-30，
enabled：false
style：{
color：'black'
}
}，
enableMouseTracking：false
}，


{
zIndex：0，
类型：'pie'，
size ：'0％'，
data：[{
y：6，
color：'rgba（0,0,0,0）'，
dataLabels：{
enabled：false
}
}，{
y：1，
color：'rgba（0,0,200,1）'，
name：'test'
}，{
y：1，
color：'rgba（0,0,200,1）'，
name：'test'
}，{
y ：1，
color：'rgba（0,0,200,1）'，
名称：'test'
}]，
dataLabels：{
distance： - 30，
启用：false，
风格：{
颜色：'black'
}
}，
enableM ouseTracking：false
}]
}）;
}）;


解决方案

我建议改变一下逻辑：对于每个圆圈，并手动管理切片的可见性。例如： http://jsfiddle.net/vkhvvs5d/3/

为了回答第二个问题，使用 series.update（）不支持旋转动画，但它有一个简单的解决方法： http://jsfiddle.net/8x54efu6/3

  var chart = $（＃container）。highcharts（），$ b $ pie = chart.series [0]; 
 
 pie.options.startAngle = new_angle; 
 pie.isDirty = pie.isDirtyData = true; 
 
 chart.redraw（）; 
  

Hi I'm looking to create a pie chart with highchart js that expands twolayers, and rotates to the center whenever I click a section.

So far I have a pie chart that expands one layer, and a click function that brings the arcs to the center (-90). I also have a click function that rotates the pie by degrees. My inner arc stays in the center and im having a hard time moving the arc to the same position of the out rings. The inner arc do not follow the click rotate aswell.

I would like to make a pie that rotates smoothly to center (-90) and expands with two extra layers. with the inner arch to follow the outer arch and be in the same starting point as the outer arch

Thank you in advance

here is what my code executes and looks like :

pie chart with what im currently running

Here is my script

$(function () {

    var lastHighlight = -1;
    var lastPos = [10,10,10];
    $('#mouseMoveDiv').click(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 someData = theChart.series[0].data;
        var N = someData.length;
        var highLight = -1;
        for (var i = 0; i < N; i++){
            var startAngle = someData[i].angle + (((someData[i].percentage/100) * 6.28318)/2);
            var dis = 1.5795 - startAngle;
            if (lastPos[i] > 0 && dis < 0){
                highLight = i;
                lastPos[i] = dis;
                break;
            }
            lastPos[i] = dis;
        }
        if (highLight != -1){
            var someRows = $('#dataTable tr');
            someRows.eq(lastHighlight).css('backgroundColor','white');
            someRows.eq(highLight).css('backgroundColor','yellow');
            lastHighlight = highLight;
        }
    });



    $('#container').highcharts({







        chart: {
            type: 'pie',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },

        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '{point.name}',
                    center: ["50%", "50%"],
                    connectorWidth: 0,
                    startAngle: 90,
                    animation: false
                }
            }
        },

        exporting: {
            enabled: false
        },
        tooltip: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        title: {
            text: null
        },




        series: [{
            type: 'pie'
            data: [
                { name: 'Planning', y: 33.3 },
                { name: 'Sprints', y: 33.3 },
                { name: 'Release', y: 33.3 }
            ],

            size: '60%',
            innerSize: '40%',
            point: {
                events: {
                    click: function () {
                        var chart = this.series.chart,
                                series = chart.series,
                                len = series.length,
                                index = this.x + 1,
                                i;
                        for (i = 1; i < len; i++) {
                            if (i === index) {
                                series[i].update({
                                    size: '100%',
                                    dataLabels: {
                                        enabled: true
                                    }
                                }, false);
                            } else {
                                series[i].update({
                                    size: '0%',
                                    dataLabels: {
                                        enabled: false
                                    }
                                }, false);
                            }
                        }
                        var points = this.series.points;
                        var startAngle = 0;
                        for (var i = 0; i < points.length; i++) {
                            var p = points[i];
                            if (p == this) {
                                break;
                            }
                            startAngle += (p.percentage / 100.0 * 360.0);
                        }
                        this.series.update({
                            startAngle: -startAngle + 90 - ((this.percentage / 100.0 * 360.0) / 2) // center at 180
                        })
                        chart.redraw();
                    }

                }
            },
            dataLabels: {
                distance: 90, //distance name
                style: {
                    color: 'Black'
                },
                enabled: true
            },

            zIndex: 1
        },

            {
                zIndex: 0,
                type: 'pie',
                size: '60%',
                innerSize: '0%',


                data: [{
                    y: 2,
                    color: 'rgba(250,0,0,1)',
                    name: 'Training'

                },
                    {
                    y: 2,
                    color: 'rgba(250,0,0,1)',
                    name: 'Secure'
                },
                    {
                    y: 8,
                    color: 'rgba(0,0,0,0)',
                    dataLabels: {
                        enabled: false
                    }

                }],
                dataLabels: {
                    distance: -30,
                    enabled: false,
                    style: {
                        color: 'black'
                    }
                },
                enableMouseTracking: false
            },


            {
                zIndex: 0,
                type: 'pie',
                size: '0%',
                data: [{
                    y: 3,
                    color: 'rgba(0,0,0,0)',
                    dataLabels: {
                        enabled: false
                    }
                }, {
                    y: 1,
                    color: 'rgba(0,200,0,1)',
                    name: 'test'
                }, {
                    y: 1,
                    color: 'rgba(0,200,0,1)',
                    name: 'test'
                }, {
                    y: 1,
                    color: 'rgba(0,200,0,1)',
                    name: 'test'
                }, {
                    y: 3,
                    color: 'rgba(0,0,0,0)',
                    dataLabels: {
                        enabled: false
                    }
                }],
                dataLabels: {
                    distance: -30,
                    enabled: false
                    style: {
                        color: 'black'
                    }
                },
                enableMouseTracking: false
            },


            {
                zIndex: 0,
                type: 'pie',
                size: '0%',
                data: [{
                    y: 6,
                    color: 'rgba(0,0,0,0)',
                    dataLabels: {
                        enabled: false
                    }
                }, {
                    y: 1,
                    color: 'rgba(0,0,200,1)',
                    name: 'test'
                }, {
                    y: 1,
                    color: 'rgba(0,0,200,1)',
                    name: 'test'
                }, {
                    y: 1,
                    color: 'rgba(0,0,200,1)',
                    name: 'test'
                }],
                dataLabels: {
                    distance: -30,
                    enabled: false,
                    style: {
                        color: 'black'
                    }
                },
                enableMouseTracking: false
            }]
    });
});

解决方案

I suggest to change logic a bit: use one series for each of the circles, and manage manually visibility of the slices instead. For example: http://jsfiddle.net/vkhvvs5d/3/

And to answer the second question, rotate animation is not supported when using series.update(), however it have an easy workaround: http://jsfiddle.net/8x54efu6/3

var chart = $("#container").highcharts(),
    pie = chart.series[0];

pie.options.startAngle = new_angle;
pie.isDirty = pie.isDirtyData = true;

chart.redraw();

这篇关于Highchart js点击旋转并展开弧线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！