Необходимо перекосить изображения (увеличить высоту и сохранить ширину основания пирамиды) вместо столбцов.

введите здесь описание изображения

Я использую библиотеку 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 и отрегулировать высоту. Ширина основания должна быть одинаковой, а высота должна различаться. Любые советы приветствуются.


person user1405855    schedule 15.07.2015    source источник
comment
См.: stackoverflow .com/questions/16260053/ Это то, что вы хотите?   -  person Kacper Madej    schedule 17.07.2015
comment
@KacperMadej Эта скрипка не работает.   -  person user1405855    schedule 17.07.2015
comment
Попробуйте с этим - jsfiddle.net/YZkPX/45   -  person Kacper Madej    schedule 20.07.2015
comment
@KacperMadej Ты сделал мой день. Это именно то, что мне нужно. Спасибо большое!   -  person user1405855    schedule 21.07.2015