HighCharts在X軸上的日期時間散點圖不正確地繪製值

我正在X軸上創建具有時間DateTime值的高圖散點圖，並且在Y軸上創建了浮點值。問題是當我使用標籤格式化程序將曆元時間值轉換爲可讀時間值（「DD-MMM-YYYY」）時，在X軸上創建了具有相同標題的多個標籤，並且這些點不與X軸上的刻度線。HighCharts在X軸上的日期時間散點圖不正確地繪製值

我爲它創建了一個JSFiddle（Link）。我能做些什麼來解決這個問題...

$(function() { 
$('#container').highcharts({ 
    chart: { 
     type: 'scatter', 
     zoomType: 'xy' 
    }, 
    title: { 
     text: 'Errors' 
    }, 
    subtitle: { 
     text: 'Source: Temp Data' 
    }, 
    xAxis: { 
       allowDecimals: false, 
       title: { 
        text: 'days', 
        scalable: false 
       }, 
       type: 'datetime', 
       labels: { 
        formatter: function() { 
          return Highcharts.dateFormat('%d-%b-%y', moment.unix(this.value)); 



        } 
       }, 
       tickPixelInterval: 100 
      }, 
    yAxis: { 
     title: { 
      text: 'Weight (kg)' 
     } 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'left', 
     verticalAlign: 'top', 
     x: 100, 
     y: 70, 
     floating: true, 
     backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF', 
     borderWidth: 1 
    }, 
    plotOptions: { 
     scatter: { 
      marker: { 
       radius: 5, 
       states: { 
        hover: { 
         enabled: true, 
         lineColor: 'rgb(100,100,100)' 
        } 
       } 
      }, 
      states: { 
       hover: { 
        marker: { 
         enabled: false 
        } 
       } 
      }, 
      tooltip: { 
       headerFormat: '<b>{series.name}</b><br>', 
       pointFormat: '{point.x} cm, {point.y} kg' 
      } 
     } 
    }, 
    series: [{"name":"Positive Influencer","data":[[1448994600,41.40329],[1448994600,20.19966],[1449081000,32.26196],[1449167400,45.44334],[1449167400,43.79153],[1449167400,41.07479],[1449167400,24.75943],[1449167400,59.41171],[1449167400,62.26523],[1449167400,43.51655],[1449167400,41.14505],[1449253800,49.21474],[1449253800,41.14505],[1449253800,41.14505],[1449253800,59.45902],[1449340200,29.63791],[1449340200,31.5257],[1449426600,12.77947],[1449426600,16.81416],[1449426600,17.47938]],"color":"#A9D18E"},{"name":"Negative Influencer","data":[[1448908200,21.79101],[1448908200,21.79101],[1448908200,21.79101],[1448908200,17.06943],[1448908200,33.64876],[1448908200,11.28691],[1448908200,18.40087],[1448908200,16.87335],[1448908200,50.01515],[1448908200,20.16196],[1448908200,20.16196],[1448908200,20.16196],[1448908200,20.16196],[1448908200,20.16196],[1448908200,35.88634],[1448908200,20.16196],[1448908200,34.89129],[1448908200,12.91103],[1448908200,12.91103],[1448908200,12.91103],[1448908200,20.16196],[1448908200,24.0311],[1448994600,26.38517],[1448994600,11.80575],[1448994600,10],[1448994600,20.07552],[1448994600,32.33444],[1448994600,32.33444],[1448994600,20.16196],[1448994600,24.24678],[1448994600,26.86968],[1448994600,26.86968],[1449081000,16.27982],[1449081000,13.02332],[1449081000,25.71094],[1449081000,20.14183],[1449081000,11.01994],[1449081000,27.91542],[1449081000,27.91542],[1449081000,15.11342],[1449167400,29.38302],[1449167400,42.58746],[1449167400,13.3506],[1449167400,57.63139],[1449167400,46.52709],[1449167400,46.52709],[1449167400,27.91542],[1449167400,22.57789],[1449167400,20.14183],[1449167400,30.69887],[1449167400,18.12275],[1449167400,30.19594],[1449167400,30.19594],[1449253800,46.52709],[1449253800,13.3506],[1449253800,30.69887],[1449253800,12.30569],[1449253800,12.30569],[1449253800,11.81466],[1449253800,13.9246],[1449253800,11.80575],[1449253800,11.80575],[1449253800,18.12275],[1449253800,18.12275],[1449253800,27.91542],[1449253800,16.27982],[1449253800,16.27982],[1449253800,16.27982],[1449253800,16.27982],[1449253800,47.37541],[1449253800,16.27982],[1449253800,64.55871],[1449253800,42.33084],[1449253800,16.27982],[1449253800,22.57789],[1449253800,22.57789],[1449253800,16.27982],[1449253800,16.27982],[1449253800,50.01515],[1449253800,22.57789],[1449253800,12.91103],[1449253800,18.12275],[1449253800,81.70462],[1449253800,21.86977],[1449253800,22.57789],[1449253800,42.14268],[1449253800,21.1656],[1449253800,44.74439],[1449253800,30.48095],[1449253800,17.63912],[1449253800,42.34763],[1449253800,23.14725],[1449253800,28.20117],[1449340200,22.57789],[1449340200,24.12882],[1449340200,20.14183],[1449340200,22.57789],[1449340200,18.81954],[1449426600,24.12882],[1449426600,15.08914],[1449426600,21.53001],[1449426600,15.08914],[1449426600,15.08914],[1449426600,14.8175],[1449426600,15.08914],[1449426600,23.64472],[1449426600,49.31941],[1449426600,49.31941],[1449426600,49.31941],[1449426600,49.31941],[1449426600,49.31941],[1449426600,30.59185],[1449426600,30.59185],[1449426600,30.59185],[1449426600,23.64472],[1449426600,18.12275],[1449426600,18.12275],[1449426600,19.01658],[1449426600,10],[1449426600,10],[ 

1449426600,10]],"color":"#FF5252"}] 
    }); 
});

來源

2015-12-22 Nitin Agarwal

當你說 '點不與x軸標籤匹配' 你的意思是（一）有一個特定的錯誤（例如錯誤日期/時間上的點），或者你的意思是（b）這些點不能與刻度線垂直對齊？ – dcorking

（b）點不垂直對齊刻度線... –

TL：DR

讓你的X軸的刻度線落在午夜tickInterval: (24 * 3600 * 1000)

詳細的解答

您說過您看到「在X軸上創建了具有相同標題的多個標籤」。然而，當我在最近版本的谷歌瀏覽器的查看您的小提琴，x軸看起來乾淨，雖然刻度線不與天完全一致：

~~我建議你嘗試不同的瀏覽器，看看如果您的問題是由特定瀏覽器版本引起的。~~

您在評論中說過，如果您在較大的窗口中最大化圖表，則會重複一些日期標籤。

我建議你做一個更簡單的陰謀來試圖確定你的問題。

更新

如果你改變你的格式化功能，包括時間和日期：

Highcharts.dateFormat('%d-%b-%y %H:%M', moment.unix(this.value))

每對勾標記都會有不同的標籤，即使它們落在同一天：

可替換地，定製的佈局剔標記，以便他們總是在午夜時分。

更新2

我做了一個簡單的演示，以顯示刻度線和數據都與午夜對齊。最重要的特點是：

tickInterval: (24 * 3600 * 1000) // the number of milliseconds in a day.

和：

[Date.UTC(2015, 11, 01), 75], // pure JavaScript to return a unix time (in milliseconds since unix epoch) of midnight on the 1st of December

$(function() { 
 
    $('#container').highcharts({ 
 
    chart: { 
 
     type: 'scatter', 
 
     zoomType: 'xy' 
 
    }, 
 
    title: { 
 
     text: 'Datetime scatter plot demo' 
 
    }, 
 
    subtitle: { 
 
     text: 'for Stack Overflow' 
 
    }, 
 
    xAxis: { 
 
     tickInterval: (24 * 3600 * 1000), // the number of milliseconds in a day 
 
     allowDecimals: false, 
 
     title: { 
 
     text: 'Date', 
 
     scalable: false 
 
     }, 
 
     type: 'datetime', 
 
     labels: { 
 
     formatter: function() { 
 
      return Highcharts.dateFormat('%d-%b-%y', (this.value)); 
 
     } 
 
     } 
 
    }, 
 
    yAxis: { 
 
     title: { 
 
     text: 'Value' 
 
     } 
 
    }, 
 
    series: [{ 
 
     "name": "Demo values", 
 
     "data": [ 
 
     [Date.UTC(2015, 11, 01), 75], 
 
     [Date.UTC(2015, 11, 02), 70], 
 
     [Date.UTC(2015, 11, 02), 80], 
 
     [Date.UTC(2015, 11, 02), 45], 
 
     [Date.UTC(2015, 11, 03), 65], 
 
     [Date.UTC(2015, 11, 03), 40], 
 
     [Date.UTC(2015, 11, 05), 75] 
 
     ] 
 
    }], 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>

來源

2015-12-22 13:48:42 dcorking

如果您最大化圖表，您將看到具有相同標題的多個標籤http://jsfiddle.net/0ak0suf1/embedded/result/ –

是：即因爲刻度線在同一天落下。刻度線間隔均勻，並自動添加，所以如果顯示器足夠大，有些會在同一天落下。 – dcorking

@NitinAgarwal我用幾種不同的方式發佈了一些代碼來改善你的情況。我還從標籤格式化程序中刪除了一些無法訪問的代碼。 – dcorking

HighCharts在X軸上的日期時間散點圖不正確地繪製值

回答

相關問題