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]
            ]
        }]
    });
});

演示：Demo

如何创建一个图例（或类似的）来解释颜色的含义？我想向观众解释为什么有些酒吧是红色的，有些则不是。

Answer 1

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

您的类别

async

你的系列会是这样的。

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

same error-handling semantics我已经更新了你的小提琴

如何在Highcharts条形图中为条形颜色创建图例

1 个答案: