需要倾斜图像(增加高度和保持金字塔的基本宽度)而不是条形

时间:2015-07-15 22:21:39

标签: css3 svg highcharts transform skew

enter image description here

我正在使用highcharts库来创建图表。

我想知道我是否可以使用svg图像而不是条形图。 我附上它应该是什么样子的图像。 基本宽度应相同,但高度必须变化。

我不想像这里建议的那样填写栏: use image to fill bars in highchart?

我不想像这里一样创建一个三角形条形图: 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图像替换bar并调整高度。 底座宽度应相同,但高度必须不同。 任何建议都表示赞赏。

0 个答案:

没有答案