0
私は高チャートには非常に慣れています。同じデータ名で異なる値を持つ2つの円グラフがあります。私が達成しようとしているのは、パイスライスをクリックしたときに2つの円グラフから値を取得し、クリックして円グラフを回転させることです。ここで私のJSFiddleと私が達成しようとしているのは、下の画像URLです。同じデータ名（ハイチャート）の2つの円グラフを比較します
とコードあなたのシリーズの両方を使用して、ポイントを使用して、2つの円グラフを更新することができるはず、ここ
var options = {
chart: {
renderTo: 'chart-wrap',
animation: false,
type: 'pie',
backgroundColor: null,
height: 450,
events: {
load: function() {
\t \t \t \t
}
}
},
colors: ['#0f5880', '#5db2cb', '#5c6a75', '#8aaeba', '#00b1b5', '#19315a'],
credits: {
enable: false
},
title: {
text: null
},
tooltip: {
valueSuffix: '%',
enabled: false,
formatter: function() {
}
},
plotOptions: {
pie: {
animation: {
duration: 500,
easing: 'easeOutQuad'
},
shadow: false,
center: ['50%', '50%'],
cursor: 'pointer',
dataLabels: {
enabled: false
},
point: {
events: {
click: function() { \t
moveToPoint(this);
selectedInfo(this.name, this.y);
}
}
}
},
series: {
animation: {
duration: 750,
easing: 'easeOutQuad'
}
}
},
series: [{
data: [{
name: 'Financial',
y: 18.29
},
{
\t name: 'Information Technology',
y: 16.66
},
{
\t name: 'Consumer Discretionary',
y: 12.31
},
{
\t name: 'Health Care',
y: 11.17
},
{
\t name: 'Industrials',
y: 10.79
},
{
\t name: 'Consumer Staples',
y: 9.49
},
{
\t name: 'Energy',
y: 6.43
},
{
\t name: 'Materials',
y: 5.28
},
{
\t name: 'Telecommunication Services',
y: 3.31
},
{
\t name: 'Real Estate',
y: 3.14
},
{
\t name: 'Utilities',
y: 3.13
}],
startAngle: 50,
name: 'Pie 1',
size: '104%',
innerSize: '75%',
center: ['20%', '50%'],
events: {
\t click: function() {
}
}
}, {
data: [{
name: 'Financial',
y: 39.2
},
{
\t name: 'Information Technology',
y: 1.2
},
{
\t name: 'Consumer Discretionary',
y: 4.8
},
{
\t name: 'Health Care',
y: 7
},
{
\t name: 'Industrials',
y: 6.8
},
{
\t name: 'Consumer Staples',
y: 7
},
{
\t name: 'Energy',
y: 4.1
},
{
\t name: 'Materials',
y: 15.5
},
{
\t name: 'Telecommunication Services',
y: 3.5
},
{
\t name: 'Real Estate',
y: 8.2
},
{
\t name: 'Utilities',
y: 2.8
}],
startAngle: -90,
name: 'Pie 2',
size: '37%',
innerSize: '55%',
center: ['80%', '50%']
}]
};
var initChart = new Highcharts.Chart(options);
var lastAngle = 0;
var moveToPoint = function(clickPoint) {
var points = clickPoint.series.points;
var startAngle = 0;
for (var i = 0; i < points.length; i++) {
var p = points[i];
if (p === clickPoint) {
break;
}
startAngle += (p.percentage/100.0 * 360.0);
}
var newAngle = -startAngle + 90 - ((clickPoint.percentage/100.0 * 360.0)/2);
$({
angle: 0,
target: newAngle
}).animate({
angle: newAngle - lastAngle
}, {
duration: 750,
easing: 'easeOutQuad',
step: function() {
$(this).parents('.highcharts-series').css({
transform: 'rotateZ(' + this.angle + 'deg)'
});
},
complete: function() {
$(this).parents('.highcharts-series').css({
transform: 'rotateZ(0deg)'
});
clickPoint.series.update({
startAngle: newAngle // center at 90
});
lastAngle = newAngle;
}
});
};
var selectedInfo = function(selectName, selectVal) {
var selectedCategory = $('#selected-slice');
setTimeout (function() {
\t \t selectedCategory.text(selectName +', '+ selectVal);
\t }, 1000);
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
このチャートは、要件を満たしていますか？ https://jsfiddle.net/p2wjwbeo/136/はいの場合、私は答えとして投稿します –
@GrzegorzBlachlińskiありがとう、これは私が欲しいものです。しかし、クリック後ではなく、最初にデータをスライスして表示する方法はありますか？方法があれば、それは非常に役に立つでしょう。さもなければ答えとして投稿してください。 :) –