HighCharts Tooltip在鼠标移动是只能显示第一和最后一点的提示信息

longer120 发布于 2013/04/03 13:11
阅读 6K+
收藏 1

strMonitordata 是从数据库提取的Json数据,例如

{"rows":[
{"time1":"1351396888000","dataValue":"19.20"},
{"time1":"1351393288000","dataValue":"18.00"},
{"time1":"1351389688000","dataValue":"18.50"},
{"time1":"1351386088000","dataValue":"17.30"},
{"time1":"1351382488000","dataValue":"15.80"}
]}

time1为x轴,在鼠标移动时 HighCharts Tooltip是只能显示第一和最后一点的提示信息,

代码如下:

<script type="text/javascript">

        var m_width;
        var chart = null;
        $(document).ready(function() { 
            var obj = '<%=strMonitordata %>';
            var jsonData = eval("(" + obj + ")");
            if (jsonData == '') {
                return;
            }
            // 
            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            }); //   第二层
            chart = new Highcharts.Chart({ 
                chart: { renderTo: 'container',
                    type: 'spline',
                    events: {
                        load: function() {
                            var series = this.series[0];
                        }
                    }
                },    //  chart:
                credits: { enabled: false },
                title: { text: '<%=strTitle%>', x: -20 },
                xAxis: {
                    title: { text: '时 间', margin: 45, style: {} },
                    type: 'datetime',
                    tickPixelInterval: 100,
                    dateTimeLabelFormats:
                     {
                         minute: '%H:%M',
                         hour: '%H:%M',
                         day: '%b/%e',
                         month: '%b %y',
                         year: '%Y'
                     }
                },
                yAxis: { title: { text: '<%=strYAxis%>', margin: 45, style: {} }, plotLines: [{ value: 0, width: 1, color: '#808080'}] },
                tooltip:
                {
                    formatter: function() {
                        var ctime = new Date('1970, 1, 1');
                        ctime.setTime(parseInt(this.x));
                        var year = ctime.getUTCFullYear();
                        var month = ctime.getUTCMonth() + 1;
                        var day = ctime.getUTCDate();
                        var time = ctime.toLocaleTimeString();
                        return '<b>' + this.series.name + "    " + this.y + '</b><br/>' + year + '-' + month + '-' + day + " " + time;
                    }
                },
                exporting: { enabled: false },
                credits: { enabled: false },
                legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 },
                series: [{          
                    name: '<%=strSeriesName%>',
                    color: '#6b9f59',
                    lineWidth: 0.5,
                    data: (function() {
                        var data = [],
                        i;
                        var iCount = jsonData.rows.length;
                        var time = 1137095575000;
                        for (i = 0; i < iCount; i++) {
                            time = time + 3600 * 1000 * 1
                            data.push({
                                x: parseInt(jsonData.rows[i].time1),
                                y: parseFloat(jsonData.rows[i].dataValue)
                            });                          
                        }
                        return data;
                    })()
}]    


                });      
                /////////
            });      
        
    </script>
加载中
0
生命的微笑
V
VincentLee0211
正解
0
生命的微笑
生命的微笑
查询数据的时候sql语句为默认升序,试试看
0
罗伯特
罗伯特
楼上正确。谢谢!
返回顶部
顶部