如何更改饼图中向下钻取的点格式?
how to change the point format for drill down in pie charts?
我正在使用带有向下钻取功能的饼图,有什么方法可以更改工具提示功能中的点格式。我要展示;首先以百分比 (%) 格式的饼图,然后以公吨 (MT) 格式向下钻取数据。
我正在从后端服务获取各种格式的数据。产品以公吨和剩余百分比表示,实际百分比以百分比表示。
我的饼图代码如下。
function visitorData(data){
var products = data.products;
var remainingPercentage=data.remainingPercentage;
var actualPercentage=data.actualPercentage
Highcharts.chart('current', {
credits: {
enabled: false
},
chart: {
type: 'pie'
},
title: {
text: 'Production report of current quarter'
},
subtitle: {
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Planned Production',
colorByPoint: true,
data: [{
name: 'Remaining Production Qty. ',
y: data.remainingPercentage,
},
{
name: 'Actual Production Qty.',
y: data.actualPercentage,
drilldown: 'ap'
}
]
}],
drilldown: {
series: [{
name: 'production report',
id: 'po',
data: [
]
}, {
name: 'Actual Production Qty.',
id: 'ap',
data: data.products
} ]
}
});
}
提前致谢。
解决此问题的一种方法是为您的第一级系列指定 tooltip: {pointFormatter: }
。这将覆盖主要的 tooltip
格式化程序并向您显示您希望它显示的数据。
// Create the chart
Highcharts.chart('container', {
credits: {
enabled: false
},
chart: {
type: 'pie'
},
title: {
text: 'Production report of current quarter'
},
subtitle: {
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
//MT format for the lower drilldowns
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}MT</b> of total<br/>'
},
series: [{
tooltip: {
//Pointformat for the percentage series
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
name: 'Planned Production',
colorByPoint: true,
data: [{
name: 'Remaining Production Qty. ',
y: 3,
},
{
name: 'Actual Production Qty.',
y: 5,
drilldown: 'ap'
}
]
}],
drilldown: {
series: [{
name: 'production report',
id: 'po',
data: [1]
}, {
name: 'Actual Production Qty.',
id: 'ap',
data: [2]
},
]
}
});
我选择让第一级覆盖工具提示的原因是因为您的向下钻取的构造,我认为所有这些向下钻取都将使用相同的工具提示格式。
Here 你可以找到一个有效的 JSFiddle。
我正在使用带有向下钻取功能的饼图,有什么方法可以更改工具提示功能中的点格式。我要展示;首先以百分比 (%) 格式的饼图,然后以公吨 (MT) 格式向下钻取数据。
我正在从后端服务获取各种格式的数据。产品以公吨和剩余百分比表示,实际百分比以百分比表示。
我的饼图代码如下。
function visitorData(data){
var products = data.products;
var remainingPercentage=data.remainingPercentage;
var actualPercentage=data.actualPercentage
Highcharts.chart('current', {
credits: {
enabled: false
},
chart: {
type: 'pie'
},
title: {
text: 'Production report of current quarter'
},
subtitle: {
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Planned Production',
colorByPoint: true,
data: [{
name: 'Remaining Production Qty. ',
y: data.remainingPercentage,
},
{
name: 'Actual Production Qty.',
y: data.actualPercentage,
drilldown: 'ap'
}
]
}],
drilldown: {
series: [{
name: 'production report',
id: 'po',
data: [
]
}, {
name: 'Actual Production Qty.',
id: 'ap',
data: data.products
} ]
}
});
}
提前致谢。
解决此问题的一种方法是为您的第一级系列指定 tooltip: {pointFormatter: }
。这将覆盖主要的 tooltip
格式化程序并向您显示您希望它显示的数据。
// Create the chart
Highcharts.chart('container', {
credits: {
enabled: false
},
chart: {
type: 'pie'
},
title: {
text: 'Production report of current quarter'
},
subtitle: {
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
//MT format for the lower drilldowns
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}MT</b> of total<br/>'
},
series: [{
tooltip: {
//Pointformat for the percentage series
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
name: 'Planned Production',
colorByPoint: true,
data: [{
name: 'Remaining Production Qty. ',
y: 3,
},
{
name: 'Actual Production Qty.',
y: 5,
drilldown: 'ap'
}
]
}],
drilldown: {
series: [{
name: 'production report',
id: 'po',
data: [1]
}, {
name: 'Actual Production Qty.',
id: 'ap',
data: [2]
},
]
}
});
我选择让第一级覆盖工具提示的原因是因为您的向下钻取的构造,我认为所有这些向下钻取都将使用相同的工具提示格式。
Here 你可以找到一个有效的 JSFiddle。