X 轴上带有日期时间的 HighCharts 散点图未正确绘制值
HighCharts scatter plot with Datetime on X Axis not plotting values correctly
我正在创建一个 highchart 散点图，其中 X-Axis 上的纪元 DateTime 值和 Y-Axis 上的浮点值。问题是当我使用标签格式化程序将纪元时间值转换为可读时间值 ("DD-MMM-YYYY") 时，在 X-Axis 上创建了多个具有相同标题的标签，并且这些点没有垂直对齐X-axis.
上的刻度线
我已经为它创建了一个 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"}]
});
});
TL:DR
使用 tickInterval: (24 * 3600 * 1000)
让你的 x 轴刻度线落在午夜
详细解答
你说你看到了"multiple labels with same caption are created on X Axis"。然而，当我在最近版本的 Google Chrome 中查看您的 fiddle 时，x 轴看起来很干净，尽管刻度线与日期不完全对齐：
我建议您尝试不同的浏览器，看看您的问题是否是由特定浏览器版本引起的。
您在评论中说过，如果您将图表最大化 window，则会重复一些日期标签。
我建议您制作一个更简单的图来尝试确定您的问题。
更新
如果您更改格式化程序函数以包括时间和日期：
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>
我正在创建一个 highchart 散点图，其中 X-Axis 上的纪元 DateTime 值和 Y-Axis 上的浮点值。问题是当我使用标签格式化程序将纪元时间值转换为可读时间值 ("DD-MMM-YYYY") 时，在 X-Axis 上创建了多个具有相同标题的标签，并且这些点没有垂直对齐X-axis.
上的刻度线我已经为它创建了一个 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"}]
});
});
TL:DR
使用 tickInterval: (24 * 3600 * 1000)
详细解答
你说你看到了"multiple labels with same caption are created on X Axis"。然而，当我在最近版本的 Google Chrome 中查看您的 fiddle 时，x 轴看起来很干净，尽管刻度线与日期不完全对齐：
我建议您尝试不同的浏览器，看看您的问题是否是由特定浏览器版本引起的。
您在评论中说过，如果您将图表最大化 window，则会重复一些日期标签。
我建议您制作一个更简单的图来尝试确定您的问题。
更新
如果您更改格式化程序函数以包括时间和日期：
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>