Question

我正在使用asp.net MVC中的highcharts 到目前为止，我已经实现this 在这里我首先选择序列号然后我选择开始日期，结束日期然后我点击显示图表，点击它显示时间范围内的所有数据，这是正确的，因为时间（从 - 到）是正确的，并且导航栏具有该范围内的所有趋势。

现在我要做的是导航器将具有所选序列号的所有趋势，但我将仅显示所选时间范围内的数据

另外在附图中，红色框显示的日期是从哪里到的，正如我之前提到的那样，但它的格式不好，日期是从文本框中出来我希望日期适合有什么解决方案吗？

注意我希望格式和导航趋势就像this一样链接附在评论

中

我希望我已经提供了足够的信息并希望尽快得到回复

任何帮助将不胜感激

更新代码

   var chart1 = new Highcharts.Chart({

        chart: {
            renderTo: 'container1',
            type: 'column',
            zoomType: 'xy',
            panning: true,
            pankey: 'shift',
            resetZoomButton: {
                position: {
                    //align: 'right', // by default
                    //verticalAlign: 'top', // by default
                    x: -10,
                    y: 350,
                    //height: 25
                },

                relativeTo: 'chart'
            }
        },
        navigator: {
            series: {

            },
            enabled: true,
            adaptToUpdatedData: true,
            height: 30,                

        },

        rangeSelector: {
            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: { ... }
                }
            },
            enabled: true,
            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: 'all',
                text: 'All'
            }]
        },
        plotOptions: {
            column: {
                turboThreshold: 50000
            }

        },
        title: {
            text: 'Energy vs Date & Time',
            style: {
                //color: '#FF00FF',
                fontWeight: 'bold',
                //fontSize: '12px'
                //sfont: 'bold 200px Verdana, sans-serif',
            }
        },
        xAxis: {
            //  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            type: 'datetime',
            // max: new Date().getTime(),
            //labels: {

            // //   format: {value:}
            //    style: {
            //        fontSize: '13px',
            //        fontFamily: 'Verdana, sans-serif'
            //    }
            //}
        }, yAxis: {
            title: {
                text: 'Energy (kWh)',
                style: {
                    //color: '#FF00FF',
                    fontSize: '12px',
                    //sfont: 'bold 200px Verdana, sans-serif',
                }
            }

        },

        series: [{
            name: 'Energy kWh',
            color: 'green',
            data: arry_kwh,
        }]


    });

我的一半工作现在完成了我只想要导航栏应该包含所有数据系列，它只会显示我在时间范围内搜索过的数据

在highcharts asp.net MVC中格式化范围选择器

0 个答案: