高图。热图中某一点的显式颜色答案

【问题标题】：Highcharts. Explicit colour for one point in HeatMap高图。热图中某一点的显式颜色
【发布时间】：2017-02-15 21:17:28
【问题描述】：

我有一张带有这种颜色的热图：

colorAxis: {
        min: 0,
        max: 1,
        minColor: '#a50022',
        maxColor: '#007340',
        gridLineColor: '#000000',
        stops: [
            [0, '#a50022'],
            [0.5, '#fffbbc'],
            [1, '#007340']
        ],
    },

效果很好，但是现在，当我没有收到值（介于 0 和 1 之间）而是一个字符串时，我想为某些情况定义一种颜色，这样我就可以收到一个“警告”并且我想给它是红色的。为此，我尝试过这样做：

dataClasses: [{
          name: "WARNING",
          color: '#a50022',
        },
        ],

当我创建系列时：

myData.push([column, row , "WARNING"]);

这不起作用，它显示为黑色。我也试过：

myData.push({y:[column, row ,"WARNING"],name:"WARNING"});

一切都因此崩溃，没有数据显示。

在这种情况下，我将只接收字符串，没有值，所以我可以删除停止、最小值、最大值和那些东西。所以我只需要一个“热图”，我可以在其中定义每个字符串值的颜色。

【问题讨论】：

标签： highcharts

【解决方案1】：

我相信这是您现在可以在 API http://api.highcharts.com/highmaps/plotOptions.heatmap.nullColor 中指定的设置

nullColor: 颜色

应用于空点的颜色。

【讨论】：

【解决方案2】：

变化：

myData.push({y:[column, row ,"WARNING"],name:"WARNING"});

收件人：

myData.push({x: column, y:row, name:"WARNING", color: 'red'});

【讨论】：

谢谢，但是 this.point.value 为空，会是“警告”吗？
jsfiddle 演示有问题？我不知道你是什么意思。

【解决方案3】：

即使您可以在生成热图中显式设置点的颜色。您可以查看以下链接。 Demo, Explicit select and color change HeatMap

            <!DOCTYPE html>
            <html>
            <head>
              <meta http-equiv="content-type" content="text/html; charset=UTF-8">
              <meta name="robots" content="noindex, nofollow">
              <meta name="googlebot" content="noindex, nofollow">
              <title>Highcharts Demo</title>  
            </head>

            <body>
            <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
            <script src="https://code.highcharts.com/highcharts.js"></script>
            <script src="https://code.highcharts.com/modules/heatmap.js"></script>
            <script src="https://code.highcharts.com/modules/exporting.js"></script>


            <div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>  
            <button id="getselectedpoints"> Select Point</button>
            <button id="changeColor"> Change color</button>


            <script type='text/javascript'>//<![CDATA[

            var heatMapData=[];
            heatMapData.push({x: 1, y:1, name:"well_data1", color: 'red'});
            heatMapData.push({x: 4, y:5, name:"well_data2", color: 'green'});
            heatMapData.push({x: 6, y:10, name:"well_data3", color: 'blue'});
            heatMapData.push({x: 9, y:5, name:"well_data4", color: 'yellow'});

            var selfSelectedInHeatMap=false;

            var heatMapChart = Highcharts.chart('container', {

                chart: {
                    type: 'heatmap',
                    marginTop: 40,
                    marginBottom: 80,
                    plotBorderWidth: 1
                },


                title: {
                    text: 'HEAT MAP'
                },

                xAxis: {
                        min:1,
                    categories: [0,1,2,3,4,5,6,7,8,9,10,11],
                    gridLineWidth:1
                },

                yAxis: {
                        min:1,
                    categories: ['','a','b','c','d','e','f','g','h','i','j','m','n','o'],
                    gridLineWidth:1
                },



                legend: {
                    align: 'right',
                    layout: 'vertical',
                    margin: 0,
                    verticalAlign: 'top',
                    enabled:false
                }, 
                    plotOptions: {
                        series: {
                            point: {
                                events: {
                                    select: function () {
                                        selfSelectedInHeatMap = true;
                                        alert("selected "+this.name + ' (' + this.series.yAxis.categories[this.y] +', ' +this.series.xAxis.categories[this.x] +')')
                                        doHeatMapSelectionWork(this.name);
                                    }
                                }
                            }
                        }
                    },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.point.name + '</b> (' + this.series.yAxis.categories[this.point.y] +', ' +this.series.xAxis.categories[this.point.x] +')';
                    }
                },

                series: [{
                    name: 'Wells Data',
                    allowPointSelect: true,
                    cursor: 'pointer',
                        states: {
                            hover: {
                                color: '#a4edba'
                            },
                            select: {
                                borderColor: 'black',
                                borderWidth:5
                            }
                        },
                    borderWidth: 1,
                    data: heatMapData,
                    dataLabels: {
                        enabled: false        
                        }
                }]

            });


            function doHeatMapSelectionWork(name)
            {
                if(!selfSelectedInHeatMap)
                {
                    var dataPoints = heatMapChart.series[0].data;
                    for(var i=0;i<dataPoints.length;i++)
                    {
                        if(dataPoints[i].name == name)
                        {
                            dataPoints[i].select();
                          break;
                        }
                    }
                }
                selfSelectedInHeatMap=false;
            }

            function changeColorForHeatMap(name)
            {
                var dataPoints = heatMapChart.series[0].data;
                for(var i=0;i<dataPoints.length;i++)
                {
                    if(dataPoints[i].name == name)
                    {
                        dataPoints[i].update({
                                color: 'pink'            
                        });
                        break;
                    }
                }
            }
            $('#getselectedpoints').click(function () {
                doHeatMapSelectionWork('well_data1');
                });

                $('#changeColor').click(function () {
                changeColorForHeatMap('well_data2');
                });
            //]]> 

            </script>

            </body>

            </html>

【讨论】：