热图与红色的颜色范围为负值和绿色的颜色范围为正值
Heat Map With Red Color Range For Negative Values And Green Color Range For Positive Values
我使用的是highchart的热图。
现在我要设置值的颜色范围。比如绿色的颜色范围表示正值,红色的颜色范围表示负值。
我可以使用任何选项来实现它吗?
热图样本
你需要改变最小颜色和最大颜色
$(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'
}
});
});
您可以在准备要加载到图表中的数据时提到要使用的颜色,您可以添加检查并选择数据准备部分
的例子:
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"
}]
样本小提琴
相关文章:
- 如何使用D3生成特定范围内的随机颜色
- 如何制作具有特殊条形颜色的范围滑块
- DC.js 应用过滤器后热图颜色范围未更新
- d3.js应用不适用于 JSON 的颜色范围
- 获取与之关联的范围和颜色 - 色度.js
- 将底部边界的颜色更改为一定范围
- 使用javascript更改输入范围滑块的颜色
- 未捕获范围错误:超出最大调用堆栈大小(执行背景颜色切换器功能时)
- 在一定范围内使用paper.js进行颜色转换
- 独特的,范围的颜色在谷歌地理地图
- 高图-改变背景颜色沿特定的日期范围
- 在dc.js柱状图上的颜色问题,当过滤到一个狭窄的范围
- Highcharts列范围数据标签的高和低不同的颜色
- 如何使用脚本更改单元格背景颜色的多个范围
- d3:具有超过2种颜色的数组的颜色范围
- 使用javascript从HTML中线性渐变提供的范围中选择颜色
- 我如何在谷歌图表设置颜色范围
- 圆环图-将域映射到颜色范围(过渡)
- 使用滑块更新D3热图颜色范围
- 热图与红色的颜色范围为负值和绿色的颜色范围为正值