Мне нравится динамически устанавливать значение minPointLengh для высокого графика. Но приведенный ниже код не работает. не могли бы вы помочь мне сделать это.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
var minPointLength;
if(this.y > 0)
minPointLength = 3,
else
minPointLength = 0,
series: {
minPointLength: minPointLength,
}
},
series: [{
data: [4, 0, 1, 5]
}]
});
});
5 ответов
Проблема с существующими решениями:
- minPointLength не может быть разным для нескольких столбцов в серии. Так это не сработает, так как я хочу, чтобы значение бара 0 оставалось неизменным.
- Я не могу изменить данные с 0 на null, потому что у меня есть всплывающая подсказка, которая показывает данные при наведении, поэтому я не могу отображать null как данные.
Решение:
Мы добавляем дополнительную высоту столбца в данные серии и удаляем (вычитаем) ее из данных всплывающей подсказки.
- Создайте свойство say extraBarHeight и вставьте его в каждую точку данных в highchart. данные (т. е. тот, который вы получаете в
tooltip: formatter(data){}
). - Теперь добавьте этот extraBarHeight в данные, которые вы собираетесь установить в
buildGraph () { серии:"" }
- Во всплывающей подсказке проверьте свои данные
formatter(data){
, вы найдете extraBarHeight для каждой панели. Вычтите эту сумму из данных всплывающей подсказки (которые вы, вероятно, будете извлекать из свойства точек, которое автоматически обновляется в соответствии с данными серии)
Теперь вычислить extraBarHeight непросто.
Переберите все точки данных в последовательных данных и найдите наивысшую один, maxUnit
extraBarHeight = 10% от maxUnit (вы можете изменить процент)
Сравните каждую точку данных последовательно. Мы делаем это, чтобы маленькие единицы не становились больше больших, и оставляем нулевые полосы такими, какие они есть.
<код> if (dataPoint
Это долгое и сложное решение, но это единственно возможный путь, по крайней мере, на данный момент.
Это невозможно. Атрибут minPointLength
применяется ко всей серии и не может быть изменен для отдельных точек.
Если вы хотите правильно показать, когда значения положительные, а когда они равны 0, может быть полезно отобразить метки данных, чтобы эти столбцы были четко отмечены (см. Этот пример по адресу: https://jsfiddle.net/brightmatrix/1spxcsmd/).
Кроме того, все, что вы хотите делать динамически в коде Highcharts, должно быть в функциях, вызываемых либо событиями, либо функцией formatter
. Вы не можете вставлять переменные или код непосредственно в параметры диаграммы. Одна из причин, по которой ваш исходный код не работал, была связана с вашим кодом в plotOptions
.
Вы не можете использовать код внутри объекта.
Попробуйте сделать это:
var minPointLength;
if(this.y > 0)
minPointLength = 3,
else
minPointLength = 0,
};
series: {
minPointLength : minPointLength
}
Мое предложение: измените любые значения 0
на значения null
.
minPointLength
не повлияет на точки с нулевыми значениями y
.
Обновите код до:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
minPointLength: 3
}
},
series: [{
data: [4, null, 1, 5]
}]
});
});
Примере:
Дополнительная причина того, что ваш код не будет работать: вы пытаетесь установить свойство minPointLength
непосредственно внутри объекта plotOptions
- оно должно находиться внутри одного из объектов селектора серии (например, 'series: {}
',' column: {}
'и т. Д.).
Решение, используемое @jlbriggs, отлично работает, но оно также удаляет данные из всплывающих подсказок.
Я применил аналогичный подход, но вместо того, чтобы сделать их нулевыми, я просто преобразовал значения 0
в -1
и установил min
в yAxis
как 1
. А также показал 0
для значений <0
во всплывающей подсказке.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.