在javascript函数的highCharts中设置热图的值_Javascript_Highcharts

在javascript函数的highCharts中设置热图的值

javascript highcharts

在javascript函数的highCharts中设置热图的值,javascript,highcharts,Javascript,Highcharts,我正在使用higharts热图。我指的是热图的链接我想更改JavaScript函数中热图的值。我已经尝试了下面的代码。但价值观并没有改变 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 aler

我正在使用higharts热图。我指的是热图的链接

我想更改JavaScript函数中热图的值。我已经尝试了下面的代码。但价值观并没有改变

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>


图表
var热；
$（函数（）{
热=新的高点图表。图表({
图表：{
renderTo:'容器'，
类型：'热图'，
玛金托普：40，
marginBottom:80
},
标题：{
文本：“用法”
},
xAxis：{
类别：[“亚历山大”、“玛丽”、“马克西米兰”、“索菲亚”、“卢卡斯”、“玛丽亚”、“利昂”、“安娜”、“蒂姆”、“劳拉”]
},
亚克斯：{
类别：[‘星期一’、‘星期二’、‘星期三’、‘星期四’、‘星期五’]，
标题：空
},
颜色轴：{
分:0,，
minColor:“#5858FA”，
maxColor:“#FF0000”
},
图例：{
对齐：“右”，
布局：“垂直”，
保证金：0，
垂直排列：“顶部”，
y:5，
符号高度：280
},
工具提示：{
格式化程序：函数（）{
返回''+this.series.xAxis.categories[this.point.x]+'已售出
'+
this.point.value+'this.series.yAxis.categories[this.point.y]+''上的项目；
}
},
系列：[{
名称：“每位员工的销售额”，
边框宽度：0，
数据：[[0，0，0，0，0，0，0，0，0，1，2，2，4，（0，3，8，[0，4，4，10，[1，0，0，1，0，12，1，1，1，1，0，0，0，0，0，0，0，0，0，1，0，0，0，0，0，0，0，0，4，10，（1，0，0，1，0，12，1，1，1，1，1，14，（1，1，1，1，1，1，1，1，1，1，1，1，14，（1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，1，14，（2，1，1，1，1，1，1，1，1，1，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]],
数据标签：{
}
}]
});
});
函数检查（）
{
警报（“通知支票”）；
警报（“值”+heat.getValueAt（{x:0，y:0}））；
heat.series.setData（[0,0,12]）；
警报（“之后”）；
} 
检查（）

在加载DOM之前会调用函数，因此需要在

$（function（）{}）；

或图表回调中调用此函数

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

示例：

应该全局声明Heat Map实例，以便可以更改javascrip函数对其的访问以及Hea tMap的值。

您需要引用特定系列，因此它应该是Heat.series[0]。setData（）我尝试了Heat.series[0]。setData（）也可以，但数据仍然没有更改。