1
У меня есть планшет с высоким набором карт, который имеет несколько значений, которые чрезвычайно низки. Это приводит к перекрытию двух данных DataLabels, таких как эта скрипта: http://jsfiddle.net/cerjps88/Highcharts dataLabel overlap
Что является лучшим средством для того, чтобы метки не могли пересекаться?
Вот мой highchart код:
function getCostStackedColumnChart(series) {
function costFilterPluck(costCollection, propertyName) {
return _.chain(costCollection)
.filter(function (f){
return Math.abs(f.metric_mean_patient_cost) > 0 && Math.abs(f.metric_mean_patient_cost_rx) > 0
})
.pluck(propertyName)
.take(10)
.value();
}
function shapeCostData(costCollection) {
return [
{
name: 'RxCost Per Prescription',
color: '#1aadce',
data: costFilterPluck(series, 'metric_mean_patient_cost_rx')
},
{
name: 'Retail Price Per Prescription (2014)',
color: '#00FFFF',
data: costFilterPluck(series, 'metric_drug_price_rx')
}
];
}
return {
options: {
chart: {
type: 'column'
},
tooltip: {
formatter: function() {
var format = d3.format(",.2f");
var chart = this.point.series.chart;
var index = chart.xAxis[0].categories.indexOf(this.x);
var series1 = this.point.series;
return '<b>' + this.x + '</b><br/>' +
series1.name + ': $' + format(this.y);
}
},
showInLegend: true,
plotOptions: {
column: {
grouping: true,
stacking: 'normal',
dataLabels: {
enabled: true,
allowOverlap: false,
format: '${y:,.2f}',
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black',
style: {
fontWeight: 'bold',
textShadow: '0 0 3px white'
},
}
}
}
},
xAxis: {
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
},
categories: costFilterPluck(series, 'aedrug_label'),
title: {text: 'Drug'}
},
yAxis: {
min: 0,
title: {
text: 'Total Cost Per Prescription'
}
},
tooltip: {
shared: true
},
title: {
text: drugGroupName + ' RxCost'
},
series: shapeCostData(series)
};
}