Я использую библиотеку highcharts для создания диаграмм.
Я хочу знать, могу ли я использовать изображение svg вместо полос. Прикрепляю изображение того, как это должно выглядеть. Ширина основания должна быть одинаковой, а высота должна различаться.
Я не хочу заполнять полосу, как это предлагается здесь: используйте изображение для заполнения бары в хайчарте?
Я не хочу создавать просто треугольную гистограмму, как здесь: http://jsfiddle.net/83jXA/2/
$(function () {
$('#container').highcharts({
chart: {
type: 'area',
inverted: true
},
title: {
text: 'Expenditure Chart'
},
tooltip: {
formatter: function () {
if (this.x > 0) {
return 'USD '+this.y +' million';
} else { return false; }
}
},
legend: {
enabled: false
},
xAxis: {
categories: [
'',
'2010',
'',
'',
'',
'2011',
''],
lineWidth: 0,
tickWidth: 0
},
yAxis: {
title: {
text: ''
},
labels: {
enabled: false
},
gridLineColor: '#ffffff',
min: 0
},
plotOptions: {
series: {
marker: {
enabled: false
}
},
area: {
fillOpacity: 0.5,
},
},
series: [{
name: '2010',
data: [0, 3, 0, null, null, null, null],
marker: {
symbol: 'circle'
}
}, {
name: '2011',
data: [null, null, null, null, 0, 6, 0],
marker: {
symbol: 'circle'
}
}],
});
});
Мне просто нужно заменить панель изображением svg и отрегулировать высоту. Ширина основания должна быть одинаковой, а высота должна различаться. Любые советы приветствуются.