Question

我有这种颜色的热图：

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"});

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

在这种情况下，我只会收到字符串，没有值，所以我可以删除stop，min，max和那些东西。所以我只需要一个“热图”，我可以为每个字符串值定义颜色。

Answer 1

我相信现在这是您可以在API http://api.highcharts.com/highmaps/plotOptions.heatmap.nullColor

中指定的设置

nullColor：颜色

应用于零点的颜色。

Answer 2

变化：

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

要：

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

Answer 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>

Highcharts。 HeatMap中一个点的显式颜色

3 个答案: