1
我想使用熱圖生成特定日期的機器狀態概覽。各州都是我想要的，但我對這個傳說有一個疑問。我可以顯示一個顯示狀態和顏色的「傳統」圖例。Highchart - 按類別顯示熱圖圖例
Highchart小提琴：http://jsfiddle.net/p7v2f117/7/
$(function() {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 40
},
title: {
text: 'HIGHCHART - Machine State on 1/7/2015'
},
xAxis: { // minute interval
categories: ['00', '15', '30', '45']
},
yAxis: { // hour
categories: ['20:00', '21:00'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 320
},
tooltip: {
formatter: function() {
return '<b>' + this.series.yAxis.categories[this.point.y] + ' (' + this.series.xAxis.categories[this.point.x] + 'min)</b>' + '<br>state: <b>' + this.point.value + '</b><br>More details go here'
}
},
series: [{
name: 'Machine State',
borderColor: '#000000',
borderWidth: 1,
data: [{
x: 0,
y: 0,
value: 'RUN',
color: '#00FF00'
}, {
x: 1,
y: 0,
value: 'RUN',
color: '#00FF00'
}, {
x: 2,
y: 0,
value: 'RUN',
color: '#00FF00'
}, {
x: 3,
y: 0,
value: 'IDLE',
color: '#00FFFF'
}, {
x: 0,
y: 1,
value: 'IDLE',
color: '#00FFFF'
}, {
x: 1,
y: 1,
value: 'DOWN',
color: '#FF0000'
}, {
x: 2,
y: 1,
value: 'PM',
color: '#C0C0C0'
}, {
x: 3,
y: 1,
value: 'Marathon',
color: '#FFCCFF'
}, ],
dataLabels: {
enabled: false
}
}]
});
});我想基本上得到相同的行爲，我可以在融合的圖表，其中顏色是自動狀態場驅動得到（文本），它顯示了類別。他們是可點擊的事實很好，但不是必要的。
Fusionchart小提琴：http://jsfiddle.net/c8V2F/25/
FusionCharts.ready(function() {
var chart = new FusionCharts({
type: 'heatmap',
renderAt: 'chartdiv1',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "FUSIONCHART - Machine State on 1/7/2015",
"plottooltext": "<div id='nameDiv' style='font-size: 12px; border-bottom: 1px dashed #666666; font-weight:bold; padding-bottom: 3px; margin-bottom: 5px; display: inline-block; color: #888888;'>$tlLabel</div>{br}State: <b>$value</b>{br}details can go here",
"mapbycategory": "1",
//Cosmetics
"showXaxisLabels": "1",
"showYaxisLabels": "1",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"usePlotGradientColor": "0",
"canvasBgColor": "#ffffff",
"canvasBorderAlpha": "0",
"legendBgAlpha": "0",
"legendBorderAlpha": "0",
"legendShadow": "0",
"legendItemFontSize": "10",
"legendItemFontColor": "#666666",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"dataset": [{
"data": [{
"rowid": "20:00",
"columnid": "00",
"categoryid": "RUN",
"displayvalue": ""
}, {
"rowid": "20:00",
"columnid": "15",
"categoryid": "RUN"
}, {
"rowid": "20:00",
"columnid": "30",
"categoryid": "RUN"
}, {
"rowid": "20:00",
"columnid": "45",
"categoryid": "IDLE"
}, {
"rowid": "21:00",
"columnid": "00",
"categoryid": "IDLE"
}, {
"rowid": "21:00",
"columnid": "15",
"categoryid": "DOWN"
}, {
"rowid": "21:00",
"columnid": "30",
"categoryid": "PM"
}, {
"rowid": "21:00",
"columnid": "45",
"categoryid": "Marathon"
}, ]
}],
"colorrange": {
"gradient": "0",
"color": [{
"label": "RUN",
"code": "00FF00"
}, {
"label": "ASSIST",
"code": "FFFF00"
}, {
"label": "DOWN",
"code": "FF0000"
}, {
"label": "IDLE",
"code": "00FFFF"
}, {
"label": "PM",
"code": "C0C0C0"
}, {
"label": "ENG",
"code": "00B0F0"
}, {
"label": "Marathon",
"code": "FFCCFF"
}
]
}
}
});
chart.render();
});有沒有一種簡單的方法爲不顯示的傳說呢？
我當然可以將狀態轉換回數字，如果這樣做更有意義。
--Nico
完美。謝謝Sebastion。我用你的答案來製作'最終'產品。 （http://jsfiddle.net/ww6Lbnc5/2/）感謝您的幫助。 --Nico – nico