Question

有没有办法让Highcharts热图表的行为像标准的html表一样调整列宽到其内容？较长的条目溢出列外，因为热图保留了所有列的相同宽度 - 即使其他列有额外的空间。

代码（与小提琴相同）：

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的问题进行了解释。

以下是实现目标的步骤（我不保证我会工作）：

将每个列设为一个单独的系列（colsize只能应用于系列，我们需要为每列提供特定的colsize
查找每列的最长标签。它们需要先生成，因此必须在chart.load事件中完成。每个点都有对其数据标签（SVG元素）的引用 - 您可以在那里找到width属性。
使用xAxis[0].toValue函数确定每列的colsize。
为每列找到新的x值 - 它取决于先前列的跨度值。更新所有积分。
类别功能基于刻度间隔的固定值，它不再适用于我们。必须使用xAxis.tickPositions来放置刻度线，以便它们填充列。 xAxis.labels.formatter可用于查找每个x轴标签的正确名称。

Highcharts根据内容大小热映射列宽

1 个答案: