向Treemap添加條件顏色

嘗試向Heatmap添加顏色。顏色基於以下條件的值。向Treemap添加條件顏色

if value 'equals or less than': -3.0 (green) 
if value less than or equal to' -1.0 (red) 
if value equals zero (grey) 
if value 'greater than or equal to' 0.1 (orange) 
if value 'greater than or equal to' 3.0 (purple)

https://jsfiddle.net/d_paul/rq862nuv/

來源

2017-04-25 Jamie White

但你的演示是一個樹形圖，不熱圖？無論如何，您需要使用['colorAxis.dataClasses']（http://api.highcharts.com/highmaps/colorAxis.dataClasses）來定義這些步驟。順便說一句，當數值例如爲0.01時會發生什麼？還是-0.4？以下是一個簡單的示例：https://jsfiddle.net/rq862nuv/2/ –

0.01將舍入爲零。 –

好吧，只是不要忘記在**渲染圖表之前捨棄數據**。 –

你定義什麼是點的價值，實際上它應該是該點的colorValue。 value是關於這個點的尺寸的信息，關於它的顏色。 colorValue可能是負數 - 值不能。如果您希望點的大小取決於其顏色，則需要將colorValue縮放比例轉換爲某個正值縮放比例，例如， [1, 10]。

如果您爲點定義colorValue，則可以使用colorAxis.dataClasses並應用顏色。

var dataMin = points.filter(p => !isNaN(p.value)).reduce((min, p) => Math.min(min, p.value), Infinity); 
var dataMax = points.filter(p => !isNaN(p.value)).reduce((max, p) => Math.max(max, p.value), -Infinity); 

var newMin = 1; 
var newMax = 10; 

function transformValue (value) { 
    return (newMax - newMin) * (value - dataMin)/(dataMax - dataMin) + newMin; 
} 

var transformedData = points.map(p => { 
    var transformedPoint = Object.assign({}, p); 

    if (p.value !== undefined) { 
    transformedPoint.value = transformValue(p.value); 
    transformedPoint.colorValue = p.value; 
    } 

    return transformedPoint; 
});

類的colorAxis

colorAxis: { 
dataClasses: [{ 
    to: -3, 
    color: '#00ff00' 
}, { 
    from: -3, 
    to: -1, 
    color: '#ff0000' 
}, { 
    from: 0, 
    to: 0, 
    color: '#000000' 
}, { 
    from: 0.1, 
    to: 3, 
    color: '#0000ff' 
}, { 
    from: 3, 
    color: '#00ffff' 
}] 
},

例如與轉換後的數據：https://jsfiddle.net/aepu6dvt/

例如與相同大小的點：https://jsfiddle.net/aepu6dvt/1/

來源

2017-04-27 12:39:20 morganfree

您可以使框的大小與其值成比例嗎？值爲0.20的框將小於值爲0.30等的框，就像您在[第二張圖片]（http://picpaste.com/Screen_Shot_2017-04-26_at_18.01.06-zgouPCl7.png）中看到的那樣 –

它們成比例 - 如果您在開發工具中調查其像素大小，它們將會不同。構建盒子大小和位置的主要因素是layoutAlgorithm - 如果您對尺寸差異不滿意，可以創建自己的算法 - 請參閱算法部分https://www.highcharts.com/docs/chart-and-series -types/treemap – morganfree

「變換數據」和「相同大小」示例之間的區別是什麼？注意到第一個示例沒有顯示'東南亞' –

向Treemap添加條件顏色

回答

相關問題