时间戳

首页 > 解决方案 > 多类别日期时间数据的 HeatMap 或 ColumnChart 想法

highcharts - 多类别日期时间数据的 HeatMap 或 ColumnChart 想法

问题描述

我想创建一个如下图所示的图表 在此处输入图像描述 每个点都有 x、值、cat1、cat2

x 轴具有 DateTime 数据 y 轴可以是类别 cat1。我希望 cat2 作为一个子类别/作为一个类比它可能是一个高图表系列

请不要建议采用 cat1 cat2 的笛卡尔积并绘制单个类别，因为这会拥挤图表并失去通过 cat2 选择的功能

Cat1 和 cat2 互不相关。只需将其视为每个数据点的 2 个枚举标签。

例如每日汽车销售数据，Cat1 = [Hatchback, Sedan...], Cat2 = [Yellow, Red, Green] 等。

这是一个非常微不足道的用例，我很难相信 highchart 不能让我这样做。我确定我错过了一些东西。任何示例或帮助将不胜感激，因为我现在已经尝试了几种方法并花费了大量时间

我们的想法是不要混合列系列或热图系列。我对所有系列都可以使用相同的类型，我个人更喜欢热图解决方案

标签： highcharts

解决方案

您可以创建两个单独heatmap的图表，它们都包含两行数据：

Highcharts.chart('container', {
    ...,
    xAxis: {
        type: 'datetime',
        visible: false
    },
    series: [{
        type: 'heatmap',
        data: [
            [0, 0, 10],
            [1, 0, 19],
            [2, 0, 8],
            [3, 0, 24],
            [4, 0, 67],
            [0, 1, 92],
            [1, 1, 58],
            [2, 1, 78],
            [3, 1, 117],
            [4, 1, 48]
        ],
        ...
    }]
});

Highcharts.chart('container2', {...});

现场演示： https ://jsfiddle.net/BlackLabel/jLbvw43z/

文档： https ://www.highcharts.com/docs/chart-and-series-types/heatmap

推荐阅读