Я новичок в библиотеке Highcharts, и мне нужно создать горизонтальную воронку. Существует существующая воронка: http://www.highcharts.com/demo/funnel, но нет возможности сделать его горизонтальным. Я читал документы о том, как расширить highcharts, но не понимаю, как это можно сделать. Можно ли создать эту горизонтальную воронку с помощью Highcharts?
Пользовательская воронка Highcharts
Ответы (2)
К сожалению не поддерживается
http://forum.highcharts.com/post100466.html?hilit=funnel%20orientation#p100466
person
ryan
schedule
27.04.2016
Это не диаграмма с изображения, которое вы разместили, но вы можете получить перевернутую пирамиду / воронку из серии сложенных областей.
Пример: http://jsfiddle.net/r9mtoec8/
$(function() {
var rawData = [7, 14, 16, 5, 4],
data = [
[0, 100]
],
overData = [
[0, 0]
],
underData = [
[0, 0]
],
zones = [],
len = rawData.length,
colors = Highcharts.getOptions().colors,
maxColor = colors.length,
i, val, sum = 0,
pos = 0;
for (i = 0; i < len; i++) {
sum += rawData[i];
}
for (i = 0; i < len; i++) {
pos += rawData[i];
val = (sum - pos) / sum * 100;
data.push([pos, val]);
overData.push([pos, (100 - val) / 2]);
underData.push([pos, (100 - val) / 2]);
zones.push({
value: pos,
color: colors[i % maxColor]
});
}
$('#container').highcharts({
chart: {
type: 'area'
},
yAxis: {
title: {
text: 'Percent'
}
},
plotOptions: {
area: {
enableMouseTracking: false,
showInLegend: false,
stacking: 'percent',
lineWidth: 0,
marker: {
enabled: false
}
}
},
series: [{
name: 'over',
color: 'none',
data: overData
}, {
id: 's1',
name: 'Series 1',
data: data,
showInLegend: true,
zoneAxis: 'x',
zones: zones
}, {
name: 'under',
color: 'none',
data: underData
}]
});
});
Вы можете построить диаграмму с изображения в Highcharts, но вам нужно будет изменить свои данные и настройки диаграммы. Пунктирные линии можно сделать с помощью линии с заданным стилем тире. Пример: http://jsfiddle.net/r9mtoec8/22/
person
Kacper Madej
schedule
28.04.2016