Единственная проблема, которая у меня возникает с этим графиком и другими подобными ему, состоит в том, что когда все данные равны нулю, столбцы опускаются ниже нуля.Если есть какие-либо другие столбцы с данными выше нуля, они отображаются так, как должны, чуть выше нуля, так что вы все равно можете навести на них курсор.Я не могу поместить это в jsFiddle
, потому что мне нужны внешние классы для этой работы.Надеюсь, немного кода достаточно.Я бы предположил, что это с некоторыми настройками, которые мне не хватает, но я не могу найти, что это за настройка.
import * as Highcharts from 'highcharts';
...
import { HighchartUtilities } from .....;
let myData =
[
{
"fullName": "ONE",
"targetGpPercent": 0E-15,
"budgetGpPercent": 0.0000
},
{
"fullName": "TWO",
"targetGpPercent": 0E-15,
"budgetGpPercent": 0.0000,
},
{
"fullName": "THREE",
"targetGpPercent": 0E-15,
"budgetGpPercent": 0.0000,
}
]
;
let element1 = document.createElement('h3');
element1.textContent = '';
let div1 = document.getElementById('container');
try {
let myChart = Highcharts.chart('container', {
chart: {
},
plotOptions: {
column: {
colorByPoint: false,
minPointLength: 10
},
series: {
events: {
}
}
},
title: {
//leave blank to make title disappear
text: ''
},
xAxis: {
//this black magic allows to have one xaxis label per column
tickPositioner: function () {
let ticks = this.series[0].processedXData.slice();
ticks.info = this.tickPositions.info;
return ticks;
},
categories: HighchartUtilities.getValuesInArray(myData, 'fullName'),
labels: {
style: {
fontWeight: 'bold'
}
}
},
yAxis: {
title: {
text: 'GP to Budget Percent'
},
labels: {
formatter: function () {
return this.axis.defaultLabelFormatter.call(this) * 100 + '%';
}
}
},
tooltip: {
formatter: function () {tooltip goes here}
},
useHTML: true
},
legend: {
},
navigation: {
buttonOptions: {
enabled: true
}
},
series: [
<Highcharts.SeriesColumnOptions>{
id: 'prsColumn',
name: 'Sales Person',
data: HighchartUtilities.getChangedYDataArray(myData,
'budgetGpPercent'),
type: 'column'
},
<Highcharts.SeriesLineOptions>{
id: 'teamTargetLine',
name: 'Targets',
data: HighchartUtilities.getChangedYDataArray(myData,
'targetGpPercent'),
type: 'line',
color: 'orange',
marker: {
fillColor: 'orange',
symbol: 'square',
radius: 3
}
}
]
});
} catch (error) {
element1.textContent = 'ERROR: ' + error.stack;
document.body.insertBefore(element1, div1);
}
Вот как это выглядит после рендеринга диаграммы.
После того, как вы измените любое из значений данных на что-либо немного больше нуля, проблема устранится сама собой.Здесь показано одно из значений 0.0001
.Остальные равны нулю.