Question

不知何故，差距没有减小，如下图所示：

我正在使用Highcharts热图。请帮助我减少间隔和行之间的差距。当我们增加数据时，某些数据未显示在图形上，因此将跳过这些数据。数据似乎在某处丢失。

 Highcharts
            .stockChart(
                    'container',
                    {
                        chart : {
                            type : 'heatmap',
                            marginTop : 40,
                            height : 500,
                            width : 900,
                            panning : true,
                            followTouchMove : true,
                            pinchType : 0,
                            followPointer : true,
                            inverted : true,
                        },

                        data : {
                            csv : data,
                        },
                        navigator : {
                            top : 40,
                        },
                        rangeSelector : {
                            buttons : [ {
                                count : 1,
                                type : 'minute',
                                text : '1M'
                            }, {
                                count : 5,
                                type : 'minute',
                                text : '5M'
                            }, {
                                type : 'all',
                                text : 'All'
                            } ],
                            inputEnabled : false,
                            enabled : false,
                            selected : 0
                        },

                        title : {
                            text : 'Live random data'
                        },

                        exporting : {
                            enabled : true,
                            buttons : {
                                contextButton : {
                                    menuItems : [
                                            {
                                                textKey : 'viewData',
                                                onclick : function() {
                                                    this.viewData();
                                                    $('#pausereset')
                                                            .toggleClass(
                                                                    'optionsettable');
                                                }
                                            },
                                            {
                                                separator : true
                                            },
                                            {
                                                textKey : 'downloadPNG',
                                                onclick : function() {

                                                    var title = this.title.textStr;

                                                    this.exportChart({
                                                        type : 'image/png',
                                                        filename : title
                                                    });
                                                }
                                            },
                                            {
                                                textKey : 'downloadJPEG',
                                                onclick : function() {
                                                    var title = this.title.textStr;
                                                    this
                                                            .exportChart({
                                                                type : 'image/jpeg',
                                                                filename : title
                                                            });
                                                }
                                            },
                                            {
                                                textKey : 'downloadPDF',
                                                onclick : function() {
                                                    var title = this.title.textStr;
                                                    this
                                                            .exportChart({
                                                                type : 'application/pdf',
                                                                filename : title
                                                            });
                                                }
                                            },
                                            {
                                                textKey : 'downloadSVG',
                                                onclick : function() {
                                                    var title = this.title.textStr;
                                                    this
                                                            .exportChart({
                                                                type : 'image/svg+xml',
                                                                filename : title
                                                            });
                                                }
                                            } ]
                                }
                            }
                        },
                        yAxis : {
                            scrollbar : {
                                enabled : true,
                                showFull : true
                            },
                            title : {
                                text : null
                            },
                            labels : {
                                format : '{value}:00'
                            },
                            /* minPadding : 50,
                            maxPadding : 20, */
                            /* tickPositions : [ 0, 6, 12, 18, 24 ], */
                            tickWidth : 0.5,
                        /* min : 0,
                        max : 33 */
                        },
                        xAxis : {
                            reversed : true,
                            scrollbar : {
                                enabled : true,
                                showFull : true
                            },
                            tickPixelInterval : 0.5,
                        },
                        plotOptions : {
                            dataLabels : {
                                enabled : true
                            },
                            heatmap : {
                                allowPointSelect : true
                            },
                            series : {
                                pointPadding : 0,
                                groupPadding : 0.1,
                            }
                        },
                        colorAxis : {
                            stops : [ [ 0, '#84D984' ], [ 0.5, '#127B12' ],
                                    [ 0.9, '#005500' ] ],
                            min : -5
                        },

                        series : [ {
                            type : 'heatmap',
                            name : 'Random data',
                            borderWidth : 0,
                            showInNavigator : true,
                            turboThreshold : 0,
                            cropThreshold : 300,
                            /* colsize : 0.1 * 36e5, */
                            pointPadding : 0,
                            colsize : 0.1 * 36e5,
                            rowsize : 1,
                            tooltip : {
                                headerFormat : 'Temperature<br/>',
                                pointFormat : '{point.x: %H}:{point.x: %m} - {point.y}:00: <b>{point.value} ℃</b>'
                            },
                        } ]
                    });

Here is the jsfiddle link

Answer 1

您只需要增加series.colsize的值即可。在这种情况下，您可以将其设置为等于一小时间隔，就像这样：

series: [{
    type:'heatmap',
    borderWidth: 0,
    pointWidth: '100%',
    colsize: 36e5, // one hour
    tooltip: {
        headerFormat: 'Temperature<br/>',
        pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>'
    }
}]

实时示例：http://jsfiddle.net/zpvdweab/1/

Highchart减少了热图中的缺口大小和数据丢失

1 个答案: