У меня есть диаграмма столбчатых столбцов с высоким графиком, которая показывает положительный, нулевой и отрицательный доход для разных секторов. Но я столкнулся с какой-то странной проблемой, потому что у меня есть три серии, если у меня есть значение серии, подсчитанное менее 3, на диаграмме отображается неверная информация. Я не настолько, чтобы быть причиной. например, в моем коде обратите внимание на стоимость джута, бумаги и печати и телекоммуникационного сектора; сумма этих значений меньше 3, но у них есть 3 значения для каждого, и на диаграмме отображается неверная информация. если вы поместите свой курсор, вы заметите это, и вы также увидите, что уложенные в стеке также ошибочны. скрипка здесь: http://jsfiddle.net/Snowbell92/KtrZz/. проверьте последний сектор "Телеком". он имеет положительное значение 2, но когда я поворачиваю положительное значение из легенды, телеком по-прежнему получает столбец на двоих, просто окрашенный в красный цвет. значение не обновляется вообще. мой javascript для highchart ниже:
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
height: 400
},
title: {
text: 'Todays Sector Up/Down Ratio'
},
xAxis: {
categories: ['Bank', 'Engineering', 'Food & Allied', 'Fuel & Power', 'Jute','Textile','Pharmaceuticals','Paper & Printing','Serv. & R. Estate', 'Cement','Miscellaneous','Insurance','NBFI','IT Sector','Travel & Leisure','Ceramics','Mutual Funds','Tannery','Telecom'],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
labels:
{
enabled: false
},
title: {
text: ''
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'left',
x: 20,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
series: {
minPointLength:15,
borderColor: '#f2f2f2',
borderWidth: 2,
shadow: true
},
column: {
stacking: 'normal',
pointPadding: 0.1,
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
verticalAlign: 'top'
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Positive Return',
data: [15, 20, 14, 7, 1, 20,15,1,2,5,4,20,15,2,2,3,35,2,2],
color: '#008000',
}, {
name: '0 Return',
data: [5, 2, 2, 3, 1, 9,8,0,1,1,3,5,5,2,0,1,5,3,0],
color: '#1F497D',
}, {
name: 'Negetive Return',
data: [10, 5, 1 , 5, 1, 3,2,0,1,1,2,21,3,2,1,1,3,0,0],
color: '#F40909',
}]
});
});
Любая помощь приветствуется. Заранее спасибо.
Если вы спрашиваете, почему ваш график показывает столбец даже значение равно нулю, то из-за minPointLeght
установки в plotOptions
:
plotOptions: {
series: {
minPointLength:15, //get rid of the minPointLength setting and you will be fine
borderColor: '#f2f2f2',
borderWidth: 2,
shadow: true
},
Я обновил ваш jsfiddle: http://jsfiddle.net/KtrZz/1/