Question

如果我将滚动条应用于热图（通过highcharts），则滚动时数据会与x轴标签重叠。目前热图上是否不支持滚动条？

请检查jsfiddle以获得更清晰的信息

$(function () {
   Highcharts.chart('container', {

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

            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'normal'
                        }
                    }
                }
            },

            title: {
                text: ''
            },

            xAxis: {
                categories: ['A', 'B', 'C', 'D', 'E']
            },

            yAxis: {
                categories: ['AE', 'AQ', 'DF', 'CV', 'XC', 'FG'],
                title: null,
              min: 0,
              max: 5,
              scrollbar: {
                enabled: true
              }
            },

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

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

            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.yAxis.categories[this.point.y] + '</b> has been awarded <b>
        ' +
        this.point.value + ' $
    </b> in <br><b>  ' + this.series.xAxis.categories[this.point.x] + '</b>';
                }
            },
            exporting: { enabled: false },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Sales per employee',
                borderWidth: 1,
                data: [[0, 0, 3432], [0, 1, 32323], [0, 2, 23232], [0, 3, 0], [0, 4, 34064], [0, 5, 324], [0, 6, 33], [1, 0, 8292921], [1, 1, 34234234], [1, 2, 150895], [1, 3, 0], [1, 4, 432432], [1, 5, 312274], [1, 6, 532541], [2, 0, 1253412], [2, 1, 145933], [2, 2, 432423], [2, 3, 0], [2, 4, 2722052], [2, 5, 44284], [2, 6, 34324], [3, 0, 35434257], [3, 1, 0], [3, 2, 267659], [3, 3, 0], [3, 4, 4234320], [3, 5, 342340], [3, 6, 0], [4, 0, 1525929], [4, 1, 34073], [4, 2, 139196], [4, 3, 117], [4, 4, 0], [4, 5, 137038], [4, 6, 61571]],
                dataLabels: {
                    enabled: true,
                    color: '#000000'
                }
            }]

        });
    });

Answer 1

将overflow设为none，将crop设为true：

plotOptions: {
  series: {
    dataLabels: {
      overflow: 'none',
      crop: true,

示例：http://jsfiddle.net/zwy3vhts/60/

如何在highcharts热图上使用滚动条？

1 个答案: