HighCharts

Question

我在堆积柱形图中有四个堆栈：“一个已完成”、“一个待处理”、“两个已完成”、“两个待处理”。

默认情况下，这些堆栈有四个图例。

我想要的是有两个图例：“一”和“二”。可以使用 Highcharts 吗？

编辑：添加代码。 text/logic 中的一些已被删除。大部分样式都是我在网上找到的。

Highcharts.chart('', {
    chart: {
        type: 'column',
    },
    title: {
        text: '',
    },
    xAxis: {
        categories: c,
        labels: {
            y: 40
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: ''
        },
        stackLabels: {
            enabled: true,
            verticalAlign: 'bottom',
            crop: false,
            overflow: 'none',
            y: 20,
            formatter: function () {
                return this.stack
            },
            style: {
                fontSize: '9px',
                color: (
                    Highcharts.defaultOptions.title.style &&
                    Highcharts.defaultOptions.title.style.color
                ) || 'gray'
            }
        }
    },
    credits: {
        enabled: false
    },
    legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },
    tooltip: {
        formatter: function () {
            //custom logic
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true
            }
        },
        series: {
            cursor: 'pointer',
            events: {
                click: function (event) {
                    //custom click to filter logic
                }
            }
        }
    },
    series: [{
        name: 'One Pending',
        data: one_series_pending,
        color: '#7cb5ec',
        stack: 'Pending'
    }, {
        name: 'One Completed',
        data: one_series_completed,
        color: '#7cb5ec',
        stack: 'Completed'
    }, {
        name: 'Two Pending',
        data: two_series_pending,
        color: '#434348',
        stack: 'Pending'
    }, {
        name: 'Two Completed',
        data: two_series_completed,
        color: '#434348',
        stack: 'Completed'
    }]
});

示例图表：我想要相同颜色的单个图例（两堆）

Answer 1

您可以 link 一个系列与另一个系列并使用 linkedTo 属性.

为它们创建一个传奇项目

    series: [{
        name: 'One Pending',
        data: [9, 5],
        color: '#7cb5ec',
        stack: 'Pending'
    }, {
        name: 'One Completed',
        data: [6, 2],
        color: '#7cb5ec',
        stack: 'Completed',
        linkedTo: 0
    }, {
        name: 'Two Pending',
        data: [35, 5],
        color: '#434348',
        stack: 'Pending'
    }, {
        name: 'Two Completed',
        data: [3, 0],
        color: '#434348',
        stack: 'Completed',
        linkedTo: 2
    }]

现场演示： http://jsfiddle.net/BlackLabel/eh5m10q9/

API参考：https://api.highcharts.com/highcharts/series.column.linkedTo

HighCharts - Stack Column 图表中两列的单个图例

HighCharts - Single legend for two columns in a Stack Column chart