图表问题

Question

你能帮我用highcharts吗api客户想看这张图片：

这是我的示例代码：

$(function () {
    var yourLabels = ["Women", "Age", "Men"];
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ["", "", ""]
        },
        yAxis: {
            stackLabels: {
                enabled: true,
                align: 'center'
            }
        },
        plotOptions: {
            series: {
                stacking: 'normal',
                pointPadding: 0,
                groupPadding: 0,
                dataLabels: {
                    enabled: false,
                    color: 'white'
                }
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4]
        }, {
            data: [-144.0, -176.0, -135.6]
        }]
    });
});

我正忙着编写 highcharts 的评论。提前致谢！

Answer 1

你需要设置的选项比较多，mockup给你：https://jsfiddle.net/ptysyo4p/13/

长话短说：

使用多个 x 轴显示图表 top/middle/bottom 上的类别，使用 linkedTo 选项
使用两个 y 轴来显示图表的两个独立部分。通过 top 和 height 管理这些职位。第二个轴链接到第一个轴，但相反 - 仍然可以像我期望的那样显示正值。
第一点很难，我建议在那里呈现 transparent 列以在悬停该标签时显示标签和工具提示

和代码：

$('#container').highcharts({
    chart: {
        type: 'column'
    },
    legend: {
        enabled: false
    },
    tooltip: {
        shared: true  
    },
    xAxis: [{
        id: "mainAxis",
        top: '52%',
        lineWidth: 0,
        opposite: true,
        categories: ["Age", "18-24", "25-34", "45-54"],
        offset: 0,
        labels: {
            y: -1   
        }
    }, {
        linkedTo: 0,
        showEmpty: true,
        offset: 0,
        lineWidth: 0,
        categories: ["46%", "30%", "30%", "30%"],
        opposite: true
    }, {
        linkedTo: 0,
        showEmpty: true,
        offset: 0,
        lineWidth: 0,
        categories: ["54%", "45%", "15%", "30%"],
        opposite: false
    }],
    yAxis: [{
        height: '45%',
        offset: 0,
        title: {
            text: ""
        },
        labels: {
            enabled: false
        },
        endOnTick: true
    }, {
        top: '55%',
        height: '45%',
        reversed: true,
        linkedTo: 0,
        offset: 0,
        title: {
            text: ""
        },
        labels: {
            enabled: false
        },
        endOnTick: true
    }],

    series: [{
        borderWidth: 0,
        name: "Women",
        data: [{
            y: 46,
            color: "transparent",
            dataLabels: {
                enabled: true,
                inside: true,
                verticalAlign: "bottom",
                format: "Women"
            }
        },
        30, 30, 30],
        yAxis: 0
    }, {
        borderWidth: 0,
        name: "Men",
        data: [{
            y: 54,
            color: "transparent",
            dataLabels: {
                enabled: true,
                inside: true,
                verticalAlign: "top",
                format: "Men"
            }
        }, 45, 15, 30],
        yAxis: 1
    }]
});

当然，现在您需要处理颜色、背景等。请注意，某些选项设置为适合图表的特定高度，例如 xAxis[0].labels.y。

图表问题

Highcharts problems

jquery

highcharts