负值的红色范围和正值的绿色范围的热图答案

【问题标题】：Heat Map With Red Color Range For Negative Values And Green Color Range For Positive Values负值的红色范围和正值的绿色范围的热图
【发布时间】：2015-08-02 16:18:39
【问题描述】：

我正在使用 highchart 的热图。它工作正常。

现在我想为值设置颜色范围。就像正值的绿色范围和负值的红色范围一样。

有什么办法可以实现吗？

Heat Map Sample

【问题讨论】：

你也可以使用dataClasses

标签： javascript jquery highcharts heatmap

【解决方案1】：

您可以在准备要加载到图表的数据时提及要使用的颜色，您可以在数据准备部分添加您的检查并选择。

例子：

           data: [{
                name: 'A',
                value: 6,
                color: "red"
            }, {
                name: 'B',
                value: 6,
                color: "red"
            }, {
                name: 'C',
                value: 4,
                color:"green"
            }, {
                name: 'D',
                value: 3,
                color: "red"
            }, {
                name: 'E',
                value: 2,
                color:"green"
            }, {
                name: 'F',
                value: 2,
                color:"green"
            }, {
                name: 'G',
                value: 1,
                color:"yellow"
            }]

Sample fiddle

【讨论】：

【解决方案2】：

你需要改变最小颜色和最大颜色

$(function () {
    $('#container').highcharts({
        colorAxis: {
            minColor: '#00FF00',
            maxColor: '#FF0000'
        },
        series: [{
            type: "treemap",
            layoutAlgorithm: 'squarified',
            data: [{
                name: 'Positive A',
                value: 6,
                colorValue: 1
            }, {
                name: 'Positive B',
                value: 6,
                colorValue: 2
            }, {
                name: 'Positive C',
                value: 4,
                colorValue: 3
            }, {
                name: 'Neutral',
                value: 3,
                colorValue: 4
            }, {
                name: 'Negative E',
                value: 2,
                colorValue: 5
            }, {
                name: 'Negative F',
                value: 2,
                colorValue: 6
            }, {
                name: 'Negative G',
                value: 1,
                colorValue: 7
            }]
        }],
        title: {
            text: 'Highcharts Treemap'
        }
    });
});

这是JS Fiddle

【讨论】：