highcharts工具提示错误的日期 [英] highcharts tooltip wrong date

问题描述

我已经制作了一个高图表，它的格式是日期和时间，但它显示的日期和时间不对。

请仔细阅读下面的代码。 / p>

HTML代码

 < script src =https：// ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\"></script> 
< script src =http://code.highcharts.com/highcharts.js>< / script> 
< script src =http://code.highcharts.com/modules/exporting.js>< / script> 
< div id =containerstyle =min-width：310px; height：400px; margin：0 auto>< / div> 
  

Javascript代码

  var maxval =94; 
 $（function（）{
 var chart; 
 $（document）.ready（function（）{
 chart = new Highcharts.Chart（{
 
学分：{
启用：false 
}，
图表：{
类型：'列'，
 renderTo：'container'，
} ，
 title：{
 text：'Weekly Traffic'
}，
 xAxis：{
 type：'datetime'，
 labels：{
格式：'{value：％d-％b-％Y}'，
轮换：-45，
}，
}，
 
 yAxis： {
 labels：{enabled：false}，
 title：{
 text：''
}，
}，
 
工具提示： {
 formatter：function（）{
 return'< b>'+ this.series.name +'< / b>< br />'+'：'+ Highcharts.dateFormat （'％y-％m-％d％H：％M'，this.x）+'br&''+ Highcharts.numberFormat（（this.y / maxval）* 100）+'％'; 
} 
}，
 
 plotOptions：{
 line：{
 enableMouseTracking：false 
}，
 
系列：{
 pointStart：1444242600000，
 pointInterval：86400000，
 shadow：false，
 dataLabels：{
启用：true，
 formatter：function（ ）
 {
 var pcnt =（this.y / maxval）* 100; 
 return Highcharts.numberFormat（pcnt）+'％'; 
 
 
 $ b $，
 
系列：[{
 name：'Firefox'，
 data：[ 10,56,32,12,64,13,38]，
}，{
名称：'Chrome'，
数据：[52,59,10,60,94,3 ，
}，{
名称：'Edge'，
 data：[22,56,20,35,14,73,38]，
}，{ 
名称：'Opera'，
数据：[30,36,80,65,44,53,81]，
}，{
名称：'Safari'，
数据：[40,16,50,77,34,33,36]，
 
}]，
 
}）; 
 
}）; 
 
}）; 
  

工作小提琴给出
here。

  Highcharts.setOptions（{
 global：{
 useUTC：false 
} 
}）; 
  

参见这里更新了小提琴

I had made one highchart in that tooltip is shows date and time in format but it is showing wrong date and time.

Please go through the code below.

HTML Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Javascript Code

var maxval="94";
$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({

    credits: {
        enabled: false
    },  
    chart: {
        type: 'column',
        renderTo: 'container',
    },
    title: {
        text: 'Weekly Traffic'
    },
    xAxis: {
        type: 'datetime',
        labels: {
            format: '{value:%d-%b-%Y}',
            rotation:-45,
        },
    },

    yAxis: {
        labels:{enabled: false},
     title: {
              text: ''
           },
    }, 

          tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+': '+Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x) +'<br>'+   Highcharts.numberFormat((this.y /maxval ) * 100) + '%';
                }
            },

    plotOptions: {
        line: {
         enableMouseTracking: false
        },

        series:{
         pointStart: 1444242600000,
        pointInterval: 86400000,
             shadow:false,
         dataLabels:{
            enabled:true,
            formatter:function()
                {
                var pcnt = (this.y /maxval ) * 100;
                return Highcharts.numberFormat(pcnt) + '%';
                }
            }
        }    
},

    series: [{
        name: 'Firefox',
        data: [10,56,32,12,64,13,38],
    },{
        name: 'Chrome',
        data: [52,59,10,60,94,3,8],
    },{
        name: 'Edge',
        data: [22,56,20,35,14,73,38],
    },{
        name: 'Opera',
        data: [30,36,80,65,44,53,81],
    },{
        name: 'Safari',
        data: [40,16,50,77,34,33,36],

    }],

    });

});

});

The working fiddle is given here.

解决方案

you need to set utc false in global option of highcharts.

 Highcharts.setOptions({
global: {
    useUTC: false
}
});

see Updated fiddle here

这篇关于highcharts工具提示错误的日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！