Highcharts热图颜色与图例不匹配
我是海图新手，但我似乎对大型热图的显示有问题。图例中的颜色似乎与实际图表中的颜色不匹配 下面是我的图表配置代码Highcharts热图颜色与图例不匹配,highcharts,Highcharts,我是海图新手，但我似乎对大型热图的显示有问题。图例中的颜色似乎与实际图表中的颜色不匹配 下面是我的图表配置代码 function load_team_effort_by_day_of_week_heat_map(ele, config) { var self = $(ele); var days = ["Monday", "Tuesday", "Wednesday", "Thursday","Friday", "Saturday", "Sunday"] load_data
function load_team_effort_by_day_of_week_heat_map(ele, config)
{
var self = $(ele);
var days = ["Monday", "Tuesday", "Wednesday", "Thursday","Friday", "Saturday", "Sunday"]
load_data(self, function(response)
{
var div = $("<pre/>")
.attr("id","csv")
.css("display","none");
div.html(response.data);
$("body").append(div);
var chart_container = self.attr("chart-container");
$("#"+chart_container).css("width","100%");
var min = new Date(response.min)
var max = new Date(response.max)
var max_value = response.max_range
var mid_range = parseFloat(max_value/4);
Highcharts.chart(chart_container, {
data: {
csv: document.getElementById('csv').innerHTML
},
chart: {
type: 'heatmap',
margin: [60, 10, 80, 50]
},
boost: {
useGPUTranslations: true
},
title: {
text: '',
align: 'left',
x: 40
},
subtitle: {
text: '',
align: 'left',
x: 40
},
xAxis: {
title: {
text: config.xlabel
},
type: 'datetime',
min: Date.UTC(min.getFullYear(), min.getMonth(), min.getDate()),
max: Date.UTC(max.getFullYear(), max.getMonth(), max.getDate()),
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value:%b-%d-%Y}' // long month
},
showLastLabel: false,
tickLength: 16
},
yAxis: {
title: {
text: config.ylabel
},
labels: {
format: '{value}'
},
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false,
tickPositions: [0, 1, 2, 3, 4, 5, 6],
tickWidth: 1,
min: 0,
max: 6,
reversed: true
},
colorAxis: {
stops: [
[0, '#EEEEEE'],
[mid_range, '#00ee33'],
[max_value, '#00ee33']
],
min: 0,
max: max_value,
startOnTick: false,
endOnTick: false,
labels: {
format: '{value}'
}
},
tooltip: {
formatter: function () {
var d = new Date(this.point.x)
var todate=d.getDate();
var tomonth=d.getMonth()+1;
var toyear=d.getFullYear();
var original_date=tomonth+'/'+todate+'/'+toyear;
return '<b>' + original_date + ', <b>' +
this.point.value + '</b> on <br><b>' + days[this.point.y] + '</b>';
}
},
series: [{
boostThreshold: 100,
borderWidth: 0,
nullColor: '#EEEEEE',
colsize: 7 * 24 * 36e5, // one week
turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
}]
});
self.parents('.white-background').removeClass("loadingdv");
self.parents('.white-background').find(".lodimg").remove();
//Remving extra div for legends on rite side
self.parents('.white-background').find(".legendcontainer").remove();
});
}
功能加载\u团队\u工作\u按天\u周\u热图（ele，配置）
{
var-self=$（ele）；
风险值天数=[“周一”、“周二”、“周三”、“周四”、“周五”、“周六”、“周日”]
加载数据（自身、功能（响应）
{
var div=$（“”）
.attr（“id”、“csv”）
.css（“显示”、“无”）；
div.html（response.data）；
$（“正文”）。追加（div）；
var chart_container=self.attr（“图表容器”）；
$（“#”+图表容器）.css（“宽度”，“100%”）；
var min=新日期（response.min）
var max=新日期（response.max）
var最大值=响应最大值范围
var mid_range=parseFloat（最大值/4）；
海图。海图（海图容器{
数据：{
csv:document.getElementById（'csv'）.innerHTML
},
图表：{
类型：'热图'，
保证金：[60,10,80,50]
},
促进：{
UseGPutransations:true
},
标题：{
文本：“”，
对齐：“左”，
x:40
},
副标题:{
文本：“”，
对齐：“左”，
x:40
},
xAxis：{
标题：{
文本：config.xlabel
},
键入：“日期时间”，
min:Date.UTC（min.getFullYear（），min.getMonth（），min.getDate（）），
max:Date.UTC（max.getFullYear（）、max.getMonth（）、max.getDate（）），
标签：{
对齐：“左”，
x:5，
y:14，
格式：'{值：%b-%d-%Y}'//长月
},
showLastLabel:false，
长度：16
},
亚克斯：{
标题：{
text:config.ylabel
},
标签：{
格式：“{value}”
},
数字：0，
maxPadding:0，
startOnTick：错，
恩东蒂克：错，
位置：[0,1,2,3,4,5,6]，
宽度：1，
分:0,，
最高：6，
对
},
颜色轴：{
停止：[
[0，#EEEEEE']，
[中等范围，#00ee33']，
[最大值，#00ee33']
],
分:0,，
max:max_值，
startOnTick：错，
恩东蒂克：错，
标签：{
格式：“{value}”
}
},
工具提示：{
格式化程序：函数（）{
var d=新日期（此.point.x）
var todate=d.getDate（）；
var tomonth=d.getMonth（）+1；
var toyear=d.getFullYear（）；
var原始日期=tomonth+'/'+todate+'/'+toyear；
返回“”+原始日期+”，'+
this.point.value+'on
'+天[this.point.y]+'；
}
},
系列：[{
阈值：100，
边框宽度：0，
nullColor:“#EEEEEE”，
colsize:7*24*36e5，//一周
turboThreshold:Number.MAX_值//#3404，在4.0.5版本后移除
}]
});
self.parents（'.white background'）.removeClass（“loadingdv”）；
self.parents（“.white background”）.find（“.lodimg”）.remove（）；
//在仪式一侧保留额外的铭文
self.parents（“.white background”）.find（“.legendcontainer”）.remove（）；
});
}