chart.js之:饼图外显示标签
chart.js之2.6.0chart.js之:饼图外显示标签
我需要呈现的图表,看起来像这样:
始终显示所有的提示是不是一种可接受的方式,因为他们不会得到渲染以适当的方式:
很抱歉,我找不到解决方案。我已经试过片段标签插件,但是这有相同的问题,因为它的标签重叠,我不能隐藏某些标签。
下面是代码,创建使用片标签到标签定位片我上面的图表:
private createStatusChart(): void {
const chartData = this.getStatusChartData();
if (!chartData) {
return;
}
const $container = $(Templates.Dashboard.ChartContainer({
ContainerID: 'chart-status',
HeaderText: 'Status'
}));
this._$content.append($container);
const legendOptions =
new Model.Charts.LegendOptions()
.SetDisplay(false);
const pieceLabelOptions =
new Model.Charts.PieceLabelOptions()
.SetRender('label')
.SetPosition('outside')
.SetArc(true)
.SetOverlap(true);
const options =
new Model.Charts.Options()
.SetLegend(legendOptions)
.SetPieceLabel(pieceLabelOptions);
const chartDefinition = new Model.Charts.Pie(chartData, options);
const ctx = this._$content.find('#chart-status canvas').get(0);
const chart = new Chart(ctx, chartDefinition);
}
private getStatusChartData(): Model.Charts.PieChartData {
if (!this._data) {
return;
}
const instance = this;
const data: Array<number> = [];
const labels: Array<string> = [];
const colors: Array<string> = [];
this._data.StatusGroupings.forEach(sg => {
if (!sg.StatusOID) {
data.push(sg.Count);
labels.push(i18next.t('Dashboard.NoStateSet'));
colors.push('#4572A7');
return;
}
const status = DAL.Properties.GetByOID(sg.StatusOID);
data.push(sg.Count);
labels.push(status ? status.Title : i18next.t('Misc.Unknown'));
colors.push(status ? status.Color : '#fff');
});
const dataset = new Model.Charts.Dataset(data).setBackgroundColor(colors);
return new Model.Charts.PieChartData(labels, [dataset]);
}
结果:
真正的问题所在在切片很小时与标签重叠。您可以使用PieceLabel.js,通过隐藏它来解决重叠标签的问题。你提到不能隐藏标签所以用传说,它会显示所有片
的姓名或者,如果你想确切的行为,你可以用highcharts去,但它需要用于商业用途许可证。
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var ctx = document.getElementById("chart-area").getContext("2d");
var myDoughnut = new Chart(ctx, {
type: 'pie',
data: {
labels: ["January", "February", "March", "April", "May"],
datasets: [{
data: [
250,
30,
5,
4,
2,
],
backgroundColor: ['#ff3d67', '#ff9f40', '#ffcd56', '#4bc0c0', '#999999'],
borderColor: 'white',
borderWidth: 5,
}]
},
showDatapoints: true,
options: {
tooltips: {
enabled: false
},
pieceLabel: {
render: 'label',
arc: true,
fontColor: '#000',
position: 'outside'
},
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Testing',
fontSize: 20
},
animation: {
animateScale: true,
animateRotate: true
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>
<canvas id="chart-area"></canvas>
Fiddle演示
感谢您的回答!问题是,某些切片可能具有相同的背景色,因为这些可以由用户分配。这意味着用户不能再区分哪一个是哪一个。 –
传说将解决相同颜色的问题。 –
// I think this script should be solve your problem
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script>Highcharts.chart('container', { chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
</script>
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/pie-basic/
嗨。 OP帖子不适用于highcharts,它适用于charts.js.您的帖子无关紧要 –
你能提供你已有的代码? –
查看https://*.com/questions/36209074/how-to-move-labels-position-on-chart-js-pie – bunzab
@JeffHuijsmans我已经添加了负责图表本身的代码。我正在使用的类只是选项的包装器。 –