当前位置: 代码迷 >> JavaScript >> Highcharts热图不适用于各种数据值(最小值:0,最大值:5,000,000)
  详细解决方案

Highcharts热图不适用于各种数据值(最小值:0,最大值:5,000,000)

热度:56   发布时间:2023-06-05 11:55:46.0

我尝试使用Highcharts绘制热图(50 x 100)。 我注意到当我的数据值在宽范围内(从0到5,000,000)时,图表无法正确显示。 但是,如果我将数据值更改为较小的范围(例如,从0到1),则图表似乎还可以。

    $('#heatmap').highcharts({

    chart: {
        type: 'heatmap',
        marginTop: 40,
        marginBottom: 40,
        zoomType: 'xy'
    },

    credits: {
        enabled: false
    },

    plotOptions: {
        series: {
            events: {
                click: function (event) {
                    alert('event!');
                }
            }
        }
    },


    title: {
        text: 'Sample title yo'
    },

    xAxis: {
        categories: xCategories,
        title: null
    },

    yAxis: {
        categories: yCategories,
        title: null
    },

    colorAxis: {
        min: min,
        max: maxv,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },

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

    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: 'Lorem ipsum',
        borderWidth: 1,
        data: data,
        dataLabels: {
            enabled: false,
            color: 'black',
            style: {
                textShadow: 'none',
                HcTextStroke: null
            }
        }
    }]

});

这是我的小提琴: :

有什么我可以做的以显示较大的值吗?

您需要增加值或将其设置为无限制( 0)。

plotOptions: {
        series: {
            turboThreshold:0
        }
}

示例: :