Highcharts-系列内部导航器不显示较小的 x 轴值

问题描述 投票:0回答:1

几分钟后我就遇到了图表 x 轴配置的问题。当 x 轴值以毫秒为单位时,导航器内的系列将正确显示。然而,当x轴以分钟为单位时,间隔变得非常小,导致导航器内的系列无法显示。

以下是说明问题的小提琴示例:

摆弄毫秒(工作)- https://jsfiddle.net/gopalsingh0707/2yzm0en1/22/

  Highcharts.chart('container', {
        chart: {
            zoomType: 'x',
            events: {
                render: function() {
                    if (this.navigator) {
                        this.navigator.render();
                    }
                }
            }
        },
        title: {
            text: 'Numeric X-Axis Labels with Custom Range Selector and Navigator'
        },
        xAxis: {
            type: 'linear', // Ensure the x-axis is treated as numeric
            title: {
                text: 'Numeric Values'
            },
            labels: {
                formatter: function () {
                    return Highcharts.numberFormat(this.value, 2); // Format with 2 decimal places
                },
                rotation: 0, // Rotation of labels
                align: 'center', // Alignment of labels
                style: {
                    fontSize: '10px', // Font size of labels
                    color: '#000000' // Color of labels
                }
            }
        },
        yAxis: {
            title: {
                text: 'Value'
            }
        },
        series: [{
            name: 'Data',
            data: 
            
[[0.0, 0.062155798], [0.39999998, 0.36257562], [0.79999995, 0.9530556], [1.1999999, 1.03593], [1.5999999, 1.3881462], [1.9999999, 1.4710206], [2.3999999, 1.3674276], [2.7999997, 1.6056917], [3.1999998, 1.5435357], [3.6, 1.6160507], [3.9999998, 1.8232368], [4.3999996, 2.030422], [4.7999997, 2.196172], [5.2, 2.08222], [5.5999994, 2.113298], [5.9999995, 2.040782], [6.3999996, 2.123656], [6.7999997, 2.330842], [7.2, 2.341202], [7.5999994, 2.351562], [7.9999995, 2.5173101], [8.4, 2.299764], [8.799999, 2.38264], [9.2, 2.548388], [9.599999, 2.496592], [9.999999, 2.237608], [10.4, 2.237608], [10.799999, 2.289406], [11.199999, 2.310124], [11.599999, 2.040782], [11.999999, 2.08222]...]

            type: 'line',
            boostThreshold: 5000, // Boost module threshold
            tooltip: {
                valueDecimals: 2
            },
          //  showInNavigator: true // Show in navigator
        }],
        navigator: {
            enabled: true,
            adaptToUpdatedData: true,
            xAxis: {
                type: 'linear', // Ensure the navigator x-axis is also numeric
                labels: {
                    formatter: function () {
                        return Highcharts.numberFormat(this.value, 2); // Match the main chart's format
                    }
                }
            },
            series: {
                dataGrouping: {
                    enabled: true
                }
            }
        },
        scrollbar: {
            enabled: true,
          
        }
    });

摆弄分钟。 (不起作用)- https://jsfiddle.net/gopalsingh0707/j8yaf1nw/78/

  Highcharts.chart('container', {
        chart: {
            zoomType: 'x',
            events: {
                render: function() {
                    if (this.navigator) {
                        this.navigator.render();
                    }
                }
            }
        },
        title: {
            text: 'Numeric X-Axis Labels with Custom Range Selector and Navigator'
        },
        xAxis: {
            type: 'linear', // Ensure the x-axis is treated as numeric
            title: {
                text: 'Numeric Values'
            },
            labels: {
                formatter: function () {
                    return Highcharts.numberFormat(this.value, 2); // Format with 2 decimal places
                },
                rotation: 0, // Rotation of labels
                align: 'center', // Alignment of labels
                style: {
                    fontSize: '10px', // Font size of labels
                    color: '#000000' // Color of labels
                }
            }
        },
        yAxis: {
            title: {
                text: 'Value'
            }
        },
        series: [{
            name: 'Data',
            data: 
            
[[0, 0.062155798], [0.000007, 0.36257562], [0.000013, 0.9530556], [0.00002, 1.03593], [0.000027, 1.3881462], [0.000033, 1.4710206], [0.00004, 1.3674276], [0.000047, 1.6056917], [0.000053, 1.5435357], [0.00006, 1.6160507], [0.000067, 1.8232368], [0.000073, 2.030422], [0.00008, 2.196172], [0.000087, 2.08222], [0.000093, 2.113298], [0.0001, 2.040782], [0.000107, 2.123656], [0.000113, 2.330842], [0.00012, 2.341202], [0.000127, 2.351562], [0.000133, 2.5173101], [0.00014, 2.299764], [0.000147, 2.38264], [0.000153, 2.548388], [0.00016, 2.496592], [0.000167, 2.237608], [0.000173, 2.237608], [0.00018, 2.289406], [0.000187, 2.310124], [0.000193, 2.040782], [0.0002, 2.08222], [0.000207, 2.196172], [0.000213, 2.134016]...]

            ,
            
            type: 'line',
            boostThreshold: 5000, // Boost module threshold
            tooltip: {
                valueDecimals: 2
            },
          //  showInNavigator: true // Show in navigator
        }],
        navigator: {
            enabled: true,
            adaptToUpdatedData: true,
            xAxis: {
                type: 'linear', // Ensure the navigator x-axis is also numeric
                labels: {
                    formatter: function () {
                        return Highcharts.numberFormat(this.value, 2); // Match the main chart's format
                    }
                }
            },
            series: {
                dataGrouping: {
                    enabled: true
                }
            }
        },
        scrollbar: {
            enabled: true,
          
        }
    });

任何解决此问题的帮助将不胜感激。

提前谢谢您!

我尝试了所有可能的导航器属性,例如调整 x 轴格式、设置 x 轴类型等。

javascript highcharts
1个回答
0
投票

要解决此问题,请禁用 navigaor 系列的

dataGrouping

演示:https://jsfiddle.net/BlackLabel/u63y0pm4/

© www.soinside.com 2019 - 2024. All rights reserved.