html - Highcharts 热图列宽基于内容大小

Question

有没有办法让 Highcharts 热图表在根据内容调整列宽方面表现得像标准 html 表？ 较长的条目溢出列外，因为热图保留其所有列的相同宽度 - 即使其他列有额外空间。

Fiddle 演示案例:http://jsfiddle.net/tvxgber9/

代码(与fiddle相同):

Highcharts.chart('container', {

    chart: {
        type: 'heatmap',
    },

    title: {
        text: 'Sales per employee per weekday'
    },

    xAxis: {
        categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon']
    },

    yAxis: {
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
        title: null
    },

    colorAxis: {
        min: 0,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },

    series: [{
        name: 'Sales per employee',
        borderWidth: 1,
        data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123456789123456789], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96]],
        dataLabels: {
            enabled: true,
            color: '#000000'
        }
    }]

});

Answer 1

使热图表现得像 HTML 表格(列根据内容调整宽度)是一个相当困难的过程——我在 OP 问题下的评论中对此进行了解释。

以下是制作步骤(我不保证我会成功):

1. 使每一列成为一个单独的系列(colsize 只能应用于一个系列，我们需要为每一列指定一个特定的 colsize)
2. 为每一列找出最长的标签。它们需要首先生成，因此必须在 chart.load 事件中完成。每个点都有对其数据标签(SVG 元素)的引用 - 您可以在那里找到 width 属性。
3. 使用xAxis[0].toValue 函数确定每列的colsize。
4. 为每一列找到新的 x 值 - 这取决于前一列的跨度值。更新所有点。
5. 类别功能基于滴答间隔的固定值，它不再适用于我们。 xAxis.tickPositions 必须用于放置刻度，以便它们匹配列。 xAxis.labels.formatter 可用于为每个 x 轴标签找到正确的名称。