Question

我必须为Web应用程序设置图表，我决定使用Highcharts，因为它似乎是最灵活的。我设法创造了我想要的东西，但我无法在一个图形中完成，我必须创建两个。

我的目标是有一个条形图，左边是负值，右边是正值，中间是类别名称（并且能够将HTML放在其中，但它是次要的）。

以下是我所拥有的today的链接：

$(function() {
    Highcharts.setOptions({
        chart : {
            type : 'bar'
        },
        title : { text : '' },
        subtitle : { text : '' },
        plotOptions : {
            bar : { dataLabels : { enabled : true }}
        },
        legend : { enabled : false },
        credits : { enabled : false },
        yAxis : {         
            title : false,
            opposite : true
        },
        xAxis : {
            categories : ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
            labels : { format : "" },
            type : "category",
            visible : false,
            title : false,
            showEmpty: false,
            reversed : true
        }
    });

    // Graphique gauche (négatifs)
    var leftChart = new Highcharts.Chart({
        chart: { renderTo: 'gphLeft' },
        yAxis: { reversed : false },
        xAxis: { opposite : true },
        series : [{
            data : [null, -150, null, null, -680]
        }]
    });

    // Graphique droite (positifs)
    var rightChart = new Highcharts.Chart({
        chart: { renderTo: 'gphRight' },
        yAxis: { reversed : false },
        xAxis: { opposite : false },
        series : [{
            data : [180, null, 258, 487, null]
        }]
    });
});

我尝试过在互联网上找到的不同技巧和答案，但我无法找到解决方案。

（我希望你理解，因为我使用翻译）

有人能帮助我吗？

Highcharts |中间带有类别名称的图表

0 个答案: