Javascript Highcharts-如何获得要显示在饼图楔形中的名称?
我已经准备好了一个饼图,并且正在运行,我正在为其执行此操作的客户端请求将出现在工具提示悬停中的名称放在饼图楔块中,以便在打印出来时显示名称。我曾尝试使用png覆盖图表,但运气不佳,尝试了距离:-60Javascript Highcharts-如何获得要显示在饼图楔形中的名称?,javascript,jquery,html,css,highcharts,Javascript,Jquery,Html,Css,Highcharts,我已经准备好了一个饼图,并且正在运行,我正在为其执行此操作的客户端请求将出现在工具提示悬停中的名称放在饼图楔块中,以便在打印出来时显示名称。我曾尝试使用png覆盖图表,但运气不佳,尝试了距离:-60 dataLabels: {inside: true,} 但他们都没有回应。我昨天在这里问过,有人提到highcharts-more.src.js文件中有一行内容是:“将列数据标签与列外部对齐。#1199。”-我是否可以在下面的js中指定数据标签或名称出现在饼图切片中 JS: HTML: 这里有
dataLabels: {inside: true,}
但他们都没有回应。我昨天在这里问过,有人提到highcharts-more.src.js文件中有一行内容是:“将列数据标签与列外部对齐。#1199。”-我是否可以在下面的js中指定数据标签或名称出现在饼图切片中
JS:
HTML:
这里有一个问题,有人能帮忙吗?您找到了正确的位置,但是您的
返回值从来没有包含您需要的文本。
尝试:
如果添加return
修改,您将在工具提示中看到相同的文本出现在dataLabel中……现在您还可以看到,鉴于您试图渲染的文本的长度,这是多么难看。到处都有重叠。您可以尝试通过将数据标签从条形图(它是一个条形图,而不是一个楔形饼图,因为这是一个极坐标图,而不是一个饼图)中进一步移出来缓解这种情况。您可以尝试更多地修改格式,但我认为这会很快变得更难看。这很难看,尽管图表最终会相当大,所以应该可以,谢谢您:D
$(function () {
$('#container').highcharts({
chart: {
polar: true
},
title: {
text: 'Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return;
}
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45,
dataLabels: {
inside: true,
offset: -100,
formatter: function() {
if(this.y !== 0) {
return this.y.toFixed(1);
}
}
}
},
column: {
grouping: false,
pointPadding: 0,
groupPadding: 0
}
},
colors: [
'#FFD700',
'#458B00',
'#0099CC'],
series: [
{
type: 'column',
name: 'Behaviour',
shadow: true,
data: [
{y:0},
{y:0},
{y:0},
{y: 78, name: 'Be Deliberate', inside: true},
{y: 82, name: 'Consistent, reliable', inside: true},
{y:0},
{y:0},
{y:0}
],
dataLabels: {
enabled: true,
inside: true,
verticalAlign: 'top',
color: '#333333'
}
}, {
type: 'column',
name: 'Communication',
shadow: true,
data: [
{y:0},
{y:0},
{y:0},
{y:0},
{y:0},
{y: 80, name: 'Listen empathy'},
{y: 76, name: 'Communicate clear'},
{y: 88, name: 'Be honest transparent'}],
dataLabels: {
enabled: true,
inside: true,
color: '#333333'
}
}, {
type: 'column',
name: 'Action',
data: [
{y: 60, name: 'Act in clients best interests'},
{y: 70, name: 'Commit to do right thing'},
{y: 68, name: 'Deliver on promise'},
{y:0},
{y:0},
{y:0},
{y:0},
{y:0}
],
shadow: true,
groupPadding: 0,
pointPlacement: 'on',
dataLabels: {
enabled: true,
inside: true,
distance: -60,
color: '#333333'
}
}]
});
});
<div id="container" style="min-width: 810px; max-width: 900px; height: 900px; margin: 0 auto"></div>
dataLabels: {
inside: true,
offset: -100,
formatter: function () {
if (this.y !== 0) {
return this.key + ' - ' + this.y.toFixed(1);
}
}
}