Question

我使用highstock在我的asp.net MVC应用程序中创建图表我添加了一个导航，我添加了一个滚动条我在一个视图中查看4个图表，对于所有图表，水平滚动条仅对图像中显示的一个可见

在图片中，上面的图表滚动条是可见的，但不会显示在下面的图表

但是当我稍微移动导航栏时，会显示滚动条，如下所示

贝娄是我的剃刀图表

var chart3 = new Highcharts.Chart({

        chart: {
            renderTo: 'container3',
            type: 'line',
            zoomType: 'xy',
            panning: true,
            panKey: 'shift',
            resetZoomButton: {
                position: {
                    //align: 'right', // by default
                    //verticalAlign: 'top', // by default
                    x: -10,
                    y: 350,
                    //height: 25
                },
                relativeTo: 'chart'
            }
        },
        scrollbar: {
            enabled: true,
            showFull: false
        },
        rangeSelector: {
            enabled: true,
            buttonTheme: { // styles for the buttons
                fill: 'none',
                stroke: 'none',
                'stroke-width': 0,
                r: 8,
                style: {
                    color: '#039',
                    fontWeight: 'bold'
                },
                states: {
                    hover: {
                    },
                    select: {
                        fill: '#039',
                        style: {
                            color: 'white'
                        }
                    }
                    // disabled: { ... }
                }
            },
            inputBoxWidth: 160,
            inputStyle: {
                color: '#039',
                fontWeight: 'bold'
            },
            labelStyle: {
                color: 'black',
                fontWeight: 'bold'
            },
            buttons: [{
                type: 'minute',
                count: 60 * 6,
                text: '6h'
            }, {
                type: 'day',
                count: 1,
                text: '1d'
            }, {
                type: 'day',
                count: 7,
                text: '7d'
            },
            {
                type: 'day',
                count: 14,
                text: '2w'
            },
            {
                type: 'day',
                count: 21,
                text: '3w'

            },
            {
                type: 'month',
                count: 1,
                text: '1m'
            },
            {
                type: 'all',
                text: 'All'
            }]
        },
        navigator: {

            enabled: true,
            height: 30,
        },
        //scrollbar: {
        //    enabled: true,
        //    barBackgroundColor: 'silver',
        //    barBorderRadius: 7,
        //    barBorderWidth: 0,
        //    buttonBackgroundColor: 'silver',
        //    buttonBorderWidth: 0,
        //    buttonArrowColor: 'yellow',
        //    buttonBorderRadius: 7,
        //    rilfeColor: 'yellow',
        //    trackBackgroundColor: 'none',
        //    trackBorderWidth: 1,
        //    trackBorderRadius: 8,
        //    trackBorderColor: '#CCC'
        //},

        title: {
            text: 'Voltage vs Date & Time',
            style: {
                //color: '#FF00FF',
                fontWeight: 'bold'
            }
        },
        xAxis: {
            // categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            type: 'datetime'
        },
        yAxis: {
            scrollbar: {
                enabled: true,
                showFull: false
            },
            alternateGridColor: '#FDFFD5',
            title: {
                text: 'Voltage (V)'
            }

        },
        plotOptions: {
            line: {
                turboThreshold: 50000
            },
            series: {
                marker: {
                    enabled: true,
                    symbol: 'circle',
                    radius: 3
                }
            }
        },
        series: [{
            name: 'Voltages Phase 1',
            color: 'red',
            data: arry_voltage_1,
        }, {
            name: 'Voltages Phase 2',
            color: 'yellow',
            data: arry_voltage_2,
        }, {
            name: 'Voltages Phase 3',
            color: 'blue',
            data: arry_voltage_3,
        },
        ],


    });

任何帮助都将受到高度赞赏

Answer 1

删除或评论showFull: false中的scrollbar: {enabled: true, showFull: false},或将值设置为true，这肯定会有效

滚动条最初在highstock中不可见

1 个答案: