Question

这是一个jsfiddle的链接，演示了我想要的内容。我想将这个系列保留给Joe，Jan和John，以便我可以通过点击系列来排除或包含他们的数据。正如你所看到的，他们对苹果的消费要高得多，其他类别看起来很荒谬。如何通过highcharts实现这一目标。 http://jsfiddle.net/rstelow/m4U6s/3/

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Stacked bar chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                }
            },
            legend: {
                backgroundColor: '#FFFFFF',
                reversed: true
            },
            plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },
                series: [{
                name: 'John',
                data: [125, 3, 4, 7, 2]
            }, {
                name: 'Jane',
                data: [90, 2, 3, 2, 1]
            }, {
                name: 'Joe',
                data: [100, 4, 4, 2, 5]
            }]
        });
    });

Answer 1

关闭堆叠看起来好一点。

http://jsfiddle.net/Ry5AJ/

 plotOptions: {

        },

我不确定你能做什么，数据就是这样。

Answer 2

对yAxis使用对数轴

yAxis: {
    type: 'lagarithmic'
}

注意：对数轴的min始终大于0.

我在这里更新了您的fiddle。

希望这会让它看起来更好。

Answer 3

将系列拆分为较小的系列，然后您可以为不同的轴设置每个类别。演示：http://jsfiddle.net/m4U6s/5/

var colors = Highcharts.getOptions().colors;
$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Stacked bar chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges']
    },
    yAxis: [{
        opposite: true,
        min: 0,
        title: {
            text: 'Total fruit consumption'
        },
    }, {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        }
    }],
    legend: {
        backgroundColor: '#FFFFFF',
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        id: 'john',
        color: colors[0],
        name: 'John',
        data: [
            [0, 125]
        ]
    }, {
        id: 'jane',
        color: colors[1],
        name: 'Jane',
        data: [
            [0, 90]
        ]
    }, {
        id: 'joe',
        color: colors[2],
        name: 'Joe',
        data: [
            [0, 100]
        ]
    }, {
        yAxis: 1,
        color: colors[0],
        linkedTo: 'john',
        name: 'John',
        data: [
            [1, 3]
        ]
    }, {
        yAxis: 1,
        color: colors[1],
        linkedTo: 'jane',
        name: 'Jane',
        data: [
            [1, 2]
        ]
    }, {
        yAxis: 1,
        color: colors[2],
        linkedTo: 'joe',
        name: 'Joe',
        data: [
            [1, 4]
        ]
    }]
});

需要Highcharts在单独的轴上渲染每个类别

3 个答案: