Question

我正在绘制具有大约 50~70k 点的晶圆的 HighCharts 热图（就像 CPU/处理器硅晶圆）。我需要在地图上放置可见的水平和垂直网格线，以便我们的工程师可以轻松了解实际单位的情况。

我有两个顾虑：

水平网格线已经可以了，但是垂直网格线没有绘制或可见。我想，我只需要设置 gridZIndex=4。请看下图 - 它应该基于 xAxis.tickPositions 值（类似于 yAxis）绘制
我添加了一些我找到的颜色选项，但它们都不能改变网格的颜色。

到目前为止，这是我的代码：

var option = {

    chart: {
        type: 'heatmap',
        zoomType: 'xy',
    },

    boost: {
        useGPUTranslations: true
    },

    title: {
        text: chrt_title,
        align: 'left',
        x: 0,
        style: {
            fontSize: '12px',
        }
    },

    exporting: {
        buttons: {
            contextButton: {
                menuItems: [
                    'viewFullscreen', 'downloadPNG', 'downloadXLS'
                ]
            }
        },
        enable: true,
    },

    xAxis: {
        title: {
            text: null
        },
        labels: {
            enabled: false,
        },
        tickPositions: [1, 19, 43, 67, 91, 115, 139, 163, 183],
        gridZIndex: 4,             //  DOESN'T WORK
        gridLineDashStyle: 'Dash',
        gridLineWidth: 1,          // DOESN'T WORK
        lineColor: 'red',
        minorTickColor: 'red',
        tickColor: 'red'
    },

    yAxis: {
        title: {
            text: null
        },
        reversed: true,
        labels: {
            enabled: false,
        },

        tickPositions: [1, 82, 116, 174, 272, 370, 428, 462, 544]
        gridZIndex: 4,             // ONLY PUT THIS AND WORKS ALREADY
        gridLineDashStyle: 'Dash', // THIS WORKS TOO (Dot,Solid,etc)
        lineColor: 'red',          
        minorTickColor: 'red',
        tickColor: 'red'
    },

    colorAxis: {
        stops: colrstops,
        min: minval,
        max: maxval,
        startOnTick: true,
        endOnTick: true,
        labels: {
            format: '{value}',
            style: {
                fontSize: '8px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },

    series: [{
        boostThreshold: 100,
        borderWidth: 0,
        nullColor: '#ffffff',
        tooltip: {
            headerFormat: chrt_title + '<br/>',
            pointFormat: 'RB{point.y} SL{point.x} <b>{point.value}</b>'
        },
        turboThreshold: Number.MAX_VALUE, // #3404, remove after 4.0.5 release
        data: data
    }]
}

如您所见，xAxis 和 yAxis 的 gridZIndex = 4，gridLineDashStyle = 'Dash'，但只有提供水平网格线的 yAxis，xAxis 没有运气（假设这是需要设置垂直网格线的地方）： (

我发现reg垂直网格线的唯一类似问题是这个： Highcharts: xAxis with vertical gridlines 但我试图把 gridLineWidth=1，仍然没有发生 T-T 请帮助。非常感谢。

更新： 我根据 @ppotaczek 示例临时替换了我的选项{}，但仍然没有出现垂直网格线。

然后我使用自己的选项{}，尝试在 xAxis 中添加最小值和最大值，并尝试临时删除我的动态数据并使用 @ppotaczek 示例，布局保持不变（没有垂直网格线）。

>

还认为这与我使用的版本有关..？它是 9.0.1 - 所以我尝试更新到最新的 9.1.1，但也有相同的结果。

var option = {
    chart: {
        type: 'heatmap',
    },

    xAxis: {
        tickPositions: [1, 19, 43, 67, 91, 115, 139, 163, 183],
        min: 1,
        max: 183,
        gridZIndex: 4,              //  DOESN'T WORK
        gridLineDashStyle: 'Dash',
        gridLineWidth: 1,           // DOESN'T WORK
        lineColor: 'red',
        minorTickColor: 'red',
        tickColor: 'red'
    },

    yAxis: {
        title: {
            text: null
        },
        reversed: true,
        labels: {
            enabled: false,
        },
        tickPositions: [1, 82, 116, 174, 272, 370, 428, 462, 544],
        gridLineDashStyle: 'Dash',  // THIS WORKS TOO (Dot,Solid,etc)
        lineColor: 'red',
        minorTickColor: 'red',
        tickColor: 'red',
    },

    colorAxis: {},

    series: [{
        data: [
            [10, 0, 1],
            [20, 1, 5],
            [30, 1, 5],
        ],
        
    }]
}

如何在 Highcharts 热图上放置垂直虚线网格线

0 个答案: