如何在Highcharts条形图中创建条形图例

Question

我在Highcharts条形图中的条形使用不同的颜色来表示两组不同的数据，如下所示（缩写）：

$(function () {
    $('#moduleDistribution').highcharts({
        colors: ['red', 'red', '#1aadce', '#1aadce'],
        chart: {
            type: 'column'
        },
        xAxis: {
            type: 'category'
        },
        plotOptions: {
            series: {
                colorByPoint: true
            }
        },
        series: [{
            showInLegend: false,
            data: [
                ['node', 291],
                ['wifi', 289],
                ['timer', 289],
                ['net', 285]
            ]
        }]
    });
});

演示： http : //jsfiddle.net/7Luob5k8/4/

如何创建图例（或类似说明）以解释颜色的含义？ 我想向观众解释为什么有些酒吧是红色的而有些却不是。

Answer 1

您可以通过使用2系列来实现。 使它们在图例中可见。 为您分配所需的颜色。 在xAxis中提及类别名称，并使用[x，y]坐标系将数据发送到图表。

您的类别

xAxis: {
    categories: ['node', 'wifi', 'timer', 'net', 'gpio', 'file', 'uart', 'i2c', 'mqtt', 'adc', '1wire', 'bit', 'pwm', 'spi', 'u8g', 'cjson', 'ws2812', 'coap']
},

您的系列看起来像这样。

        series: [{
            data: [
            [0, 291],
            [1, 289],
            [2, 289],
            [3, 285],
            [4, 284],
            [5, 283],
            [6, 263]
        ],
        color: '#FF0000'
    }, {

        data: [
            [7, 135],
            [8, 119],
            [9, 100],
            [10, 96],
            [11, 89],
            [12, 80],
            [13, 65],
            [14, 60],
            [15, 57],
            [16, 46],
            [17, 20]
        ],
        color: '#1aadce'
    }]

在这里，我已经更新了你的小提琴