2015-01-08 81 views
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

回答

1

你需要覆蓋默認參數爲highmaps:

var H = Highcharts; 

    H.seriesTypes.heatmap.prototype.axisTypes = ['xAxis', 'yAxis'], 
    H.seriesTypes.heatmap.prototype.optionalAxis = null; 

例子:http://jsfiddle.net/ww6Lbnc5/

+0

完美。謝謝Sebastion。我用你的答案來製作'最終'產品。 (http://jsfiddle.net/ww6Lbnc5/2/)感謝您的幫助。 --Nico – nico