在javascript函數中設置highCharts中的熱圖值

我正在使用higharts HeatMap。我指的是這個鏈接http://www.highcharts.com/demo/heatmap熱圖。在javascript函數中設置highCharts中的熱圖值

我想在JavaScript函數中更改heatMap的值。我已經嘗試了下面的代碼。但值不會更改。

function check() 
{ 
    alert("check called"); 
    alert("values"+ heat.getValueAt({ x: 0, y: 0 })); 
    heat.series.setData([0, 0, 12]);// heat is instance of heat Map 
    alert("after");   
}

完整的代碼是

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
    <title>Chart</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> 
    <script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script> 
    <script src="http://code.highcharts.com/modules/heatmap.js" type="text/javascript"></script> 
    <script src="http://code.highcharts.com/modules/exporting.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    var heat; 
    $(function() { 

    heat = new Highcharts.Chart({ 
    chart: { 
       renderTo: 'container', 
      type: 'heatmap', 
      marginTop: 40, 
      marginBottom: 80 
    }, 

    title: { 
      text: 'Usage ' 
    }, 

    xAxis: { 
      categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura'] 
    }, 

    yAxis: { 
      categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], 
      title: null 
    }, 

    colorAxis: { 
      min: 0, 
      minColor: '#5858FA', 
      maxColor: '#FF0000' 
    }, 

    legend: { 
      align: 'right', 
      layout: 'vertical', 
      margin: 0, 
      verticalAlign: 'top', 
      y:5, 
      symbolHeight: 280 
    }, 

    tooltip: { 
      formatter: function() { 
       return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' + 
        this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>'; 
    } 
    }, 

    series: [{ 
      name: 'Sales per employee', 
      borderWidth: 0, 
      data: [[0, 0, 2], [0, 1, 4], [0, 2, 6], [0, 3, 8], [0, 4, 10], [1, 0, 12], [1, 1, 14], [1, 2, 15], [1, 3, 25], [1, 4, 24], [2, 0, 23], [2, 1, 15], [2, 2, 25], [2, 3, 15], [2, 4, 10], [3, 0, 20], [3, 1, 13], [3, 2, 14], [3, 3, 15], [3, 4, 16], [4, 0, 13], [4, 1, 5], [4, 2, 8], [4, 3, 10], [4, 4, 15], [5, 0, 8], [5, 1, 22], [5, 2, 12], [5, 3, 6], [5, 4, 10], [6, 0, 13], [6, 1, 9], [6, 2, 8], [6, 3, 9], [6, 4, 6], [7, 0, 13], [7, 1, 1], [7, 2, 12], [7, 3, 33], [7, 4, 30], [8, 0, 25], [8, 1, 17], [8, 2, 23], [8, 3, 24], [8, 4, 20], [9, 0, 18], [9, 1, 14], [9, 2, 11], [9, 3, 18], [9, 4, 11]], 
      dataLabels: { 

    } 
    }] 

    }); 
    }); 
    function check() 
    { 
     alert("check called"); 
     alert("values"+ heat.getValueAt({ x: 0, y: 0 })); 
     heat.series.setData([0, 0, 12]); 

     alert("after"); 

    } 

    </script> 
    </head> 
    <body> 
<script>check()</script> 
<div id="container" style="height: 320px; width: 1000px; margin: 0 auto"></div> 
</body> 
</html>

來源

2015-04-21 Niketa

您需要參考particual serie，因此它應該是heat.series [0] .setData（） –

我也嘗試過使用heat.series [0] .setData（），但仍然沒有更改數據。 – Niketa

加載您的DOM之前你的函數被調用，所以你需要$(function() {});或圖表回調調用此。

heat = new Highcharts.Chart({ 
    //chart options 
},function(chart){ 
    check() 
});

例子：http://jsfiddle.net/t8suqfku/5/

來源

2015-04-22 09:00:11

熱圖實例應該在全球範圍內宣佈，以便其訪問的javascrip功能和值HEA TMAP是可以改變的。

來源

2015-04-22 09:10:35 Niketa

在javascript函數中設置highCharts中的熱圖值

回答

相關問題