2.0.0 中的日期格式中断
Date Formatting Breaks with 2.0.0
使用 1.1.1 有一段时间了，决定尝试升级到 2.0.0。对于 1.1.1，以下代码片段按预期工作：
axes: {
x: {
axisLabelFormatter: Dygraph.dateAxisLabelFormatter,
valueFormatter: Dygraph.dateValueFormatter,
ticker: Dygraph.dateTicker
}
},
xValueParser: function (x) { return 1000 * x; },
在 2.0.0 下，同样会破坏交互性——鼠标悬停停止运行，图表图例不再更新。我必须在这里更改什么才能支持 2.0.0？ JavaScript不是我的强项
谢谢。
我已经阅读了 dygraphs 的文档，我发现 valueparser 在 x 块中使用并且没有 x 前缀。你能试试这个吗？
axes: {
x: {
axisLabelFormatter: Dygraph.dateAxisLabelFormatter,
valueParser: function (x) { return 1000 * x; },
valueFormatter: Dygraph.dateValueFormatter,
ticker: Dygraph.dateTicker
}
},
如果它不起作用，请检查浏览器的 javascript 控制台是否显示任何错误。
我已经检查了您的代码，现在除 "valueFormatter: Dygraph.dateValueFormatter" 行外一切正常。如果您评论此行，除了值未在标签中格式化外，所有错误都会消失。尝试走这条路寻找解决方案
正如我之前所说，您的代码中唯一不起作用的是 valueFormatter。
你得到了结构“201609260507.06”的时间，你将它乘以 100 以删除点。然后你有一个带有自定义格式的日期的数字。
我所做的是创建一个自定义值格式化程序，它以该格式获取值，将数字解析为字符串，并获取该字符串中有关日期的所有信息。您可以按照自己的方式修改 formatDate 函数（在 javascript 代码的底部）。
我希望这对您来说是一个真正的解决方案。下面是代码。
https://jsfiddle.net/Lucidio/9jgtse5o/2/
已更新
如果您想使用以毫秒为单位的 unix 时间（即：1491483906），那么您可以从日期
创建一个新的 javascript 日期
valueFormatter: function(ms){
var date = new Date(ms);
return date;
},
如果您需要，您还可以使用格式化程序函数在返回日期之前准确地绘制出您想要的日期
var data = "date,totalIn,totalOut,interacOut,tcp_ackOut,regularOut,extwlanOut,torrentOut,extwlanIn\n" +
"201609260505.06,1926,-1641,-64,-202,-1534,0,0,0\n" +
"201609260506.06,1060,-1230,-101,-68,-1187,0,0,0\n" +
"201609260507.06,3127,-2421,-123,-79,-2383,0,0,0\n" +
"201609260508.06,5624,-2518,-45,-623,-2187,0,0,0\n" +
"201609260509.06,998,-1190,-100,-45,-1160,0,0,0";
q = new Dygraph(
document.getElementById("qdiv"),
data, {
// Appears axisLabelColor is no longer supported in 2.0
// axisLabelColor: 'darkgrey',
// logscale: true,
// labelsDiv: 'qldiv',
title: 'queues',
titleHeight: 32,
axes: {
x: {
axisLabelFormatter: Dygraph.dateAxisLabelFormatter,
valueFormatter: function(ms){
var formattedDate = formatDate(ms);
return formattedDate;
},
ticker: Dygraph.dateTicker
}
},
xValueParser: function(x) {
return 1000 * x;
},
// xValueParser: function (x) { return 1000 * parseInt(x); },
fillGraph: true,
stackedGraph: true,
// strokeBorderWidth: 1,
// strokeWidth: 2,
// totalIn,totalOut,interacOut,tcp_ackOut,regularOut,extwlanOut,torrentOut,extwlanIn
visibility: [false, false, true, true, true, true, true, false],
// colors: ['black', 'black', 'orange', 'blue', 'green', 'purple', 'yellow', 'red'],
colors: ['black', 'black', 'coral', 'dodgerblue', 'forestgreen', 'blueviolet', 'gold'],
// iWantHue default soft
// colors: ['black', 'black', '#cb673e', '#648ace', '#5ba962', '#ab62c0', '#a9983d', '#c95779'],
// iWantHue fancy light hard
// colors: ['black', 'black', '#c2007a', '#59dacd', '#019a3f', '#793ec4', '#c9b800', '#c00613'],
// iWantHue fluo soft
// colors: ['black', 'black', '#cb5c42', '#648ace', '#60a85f', '#a361c7', '#b3953f', '#cb5c42'],
fillAlpha: .5,
animatedZooms: true,
highlightCircleSize: 6,
highlightSeriesBackgroundAlpha: .9,
// Disabled highlightSeriesOpts as it always seemed to highlight the first item in the series and is not very useful in a stacked graph
// highlightSeriesOpts: {
// strokeWidth: 4,
// highlightCircleSize: 6
// },
// labelsSeparateLines: true,
labelsShowZeroValues: false,
legend: 'always',
labelsKMG2: true
});
b = new Dygraph(
document.getElementById("bdiv"),
data, {
// Appears axisLabelColor is no longer supported in 2.0
// axisLabelColor: 'darkgrey',
// While logscale would be great here, it doesn't work with negative values
// logscale: true,
title: 'bandwidth',
titleHeight: 32,
axes: {
x: {
axisLabelFormatter: Dygraph.dateAxisLabelFormatter,
valueFormatter: function(ms){
var formattedDate = formatDate(ms);
return formattedDate;
},
ticker: Dygraph.dateTicker
}
},
xValueParser: function(x) {
return 1000 * x;
},
fillGraph: true,
visibility: [true, true, false, false, false, false, false, true],
// colors: ['green', 'blue'],
colors: ['forestgreen', 'dodgerblue', 'black', 'black', 'black', 'black', 'black', 'firebrick'],
fillAlpha: .5,
animatedZooms: true,
highlightSeriesBackgroundAlpha: .9,
highlightSeriesOpts: {
strokeWidth: 4,
highlightCircleSize: 6
},
labelsShowZeroValues: false,
// labels: ['in', 'out', 'guest'],
legend: 'always',
labelsKMG2: true
});
function formatDate(d) {
var stringDate = String(d);
var yyyy = stringDate.substring(0,4);
var MM = stringDate.substring(4,6);
var dd = stringDate.substring(6,8);
var HH = stringDate.substring(8,10);
var mm = stringDate.substring(10,12);
var ss = stringDate.substring(12,14);
return yyyy + "-" + MM + "-" + dd + " " + HH + ":" + mm + ":" + ss;
}
dygraph-label.dygraph-title {
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
// font-size: large;
color: white;
// color: floralwhite;
}
// .dygraph-label.dygraph-xlabel
// .dygraph-label.dygraph-ylabel
.dygraph-axis-label.dygraph-axis-label-x {
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
font-size: small;
}
.dygraph-axis-label.dygraph-axis-label-y {
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
font-size: small;
}
.dygraph-legend {
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
font-size: small !important;
color: white;
// color: floralwhite;
background: transparent !important;
// background: rgba(169, 169, 169, 0.4) !important;
left: auto !important;
// left: 60px !important;
// top: auto !important;
// bottom: 20px !important;
right: 10px !important;
// right: auto !important;
width: auto !important;
// text-align: right !important;
// overflow: visible !important;
z-index: auto !important;
}
#root {
left: 25px;
top: 50px;
right: 50px;
bottom: 50px;
position: absolute;
}
#qdiv {
width: 100%;
height: 50%;
}
#bdiv {
width: 100%;
height: 50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.js"></script>
<title>egress queues</title>
<body>
<div id="root">
<div id="qdiv"></div>
<p></p>
<div id="bdiv"></div>
</div>
使用 1.1.1 有一段时间了，决定尝试升级到 2.0.0。对于 1.1.1，以下代码片段按预期工作：
axes: {
x: {
axisLabelFormatter: Dygraph.dateAxisLabelFormatter,
valueFormatter: Dygraph.dateValueFormatter,
ticker: Dygraph.dateTicker
}
},
xValueParser: function (x) { return 1000 * x; },
在 2.0.0 下，同样会破坏交互性——鼠标悬停停止运行，图表图例不再更新。我必须在这里更改什么才能支持 2.0.0？ JavaScript不是我的强项
谢谢。
我已经阅读了 dygraphs 的文档，我发现 valueparser 在 x 块中使用并且没有 x 前缀。你能试试这个吗？
axes: {
x: {
axisLabelFormatter: Dygraph.dateAxisLabelFormatter,
valueParser: function (x) { return 1000 * x; },
valueFormatter: Dygraph.dateValueFormatter,
ticker: Dygraph.dateTicker
}
},
如果它不起作用，请检查浏览器的 javascript 控制台是否显示任何错误。
我已经检查了您的代码，现在除 "valueFormatter: Dygraph.dateValueFormatter" 行外一切正常。如果您评论此行，除了值未在标签中格式化外，所有错误都会消失。尝试走这条路寻找解决方案
正如我之前所说，您的代码中唯一不起作用的是 valueFormatter。 你得到了结构“201609260507.06”的时间，你将它乘以 100 以删除点。然后你有一个带有自定义格式的日期的数字。
我所做的是创建一个自定义值格式化程序，它以该格式获取值，将数字解析为字符串，并获取该字符串中有关日期的所有信息。您可以按照自己的方式修改 formatDate 函数（在 javascript 代码的底部）。
我希望这对您来说是一个真正的解决方案。下面是代码。
https://jsfiddle.net/Lucidio/9jgtse5o/2/
已更新
如果您想使用以毫秒为单位的 unix 时间（即：1491483906），那么您可以从日期
创建一个新的 javascript 日期valueFormatter: function(ms){
var date = new Date(ms);
return date;
},
如果您需要，您还可以使用格式化程序函数在返回日期之前准确地绘制出您想要的日期
var data = "date,totalIn,totalOut,interacOut,tcp_ackOut,regularOut,extwlanOut,torrentOut,extwlanIn\n" +
"201609260505.06,1926,-1641,-64,-202,-1534,0,0,0\n" +
"201609260506.06,1060,-1230,-101,-68,-1187,0,0,0\n" +
"201609260507.06,3127,-2421,-123,-79,-2383,0,0,0\n" +
"201609260508.06,5624,-2518,-45,-623,-2187,0,0,0\n" +
"201609260509.06,998,-1190,-100,-45,-1160,0,0,0";
q = new Dygraph(
document.getElementById("qdiv"),
data, {
// Appears axisLabelColor is no longer supported in 2.0
// axisLabelColor: 'darkgrey',
// logscale: true,
// labelsDiv: 'qldiv',
title: 'queues',
titleHeight: 32,
axes: {
x: {
axisLabelFormatter: Dygraph.dateAxisLabelFormatter,
valueFormatter: function(ms){
var formattedDate = formatDate(ms);
return formattedDate;
},
ticker: Dygraph.dateTicker
}
},
xValueParser: function(x) {
return 1000 * x;
},
// xValueParser: function (x) { return 1000 * parseInt(x); },
fillGraph: true,
stackedGraph: true,
// strokeBorderWidth: 1,
// strokeWidth: 2,
// totalIn,totalOut,interacOut,tcp_ackOut,regularOut,extwlanOut,torrentOut,extwlanIn
visibility: [false, false, true, true, true, true, true, false],
// colors: ['black', 'black', 'orange', 'blue', 'green', 'purple', 'yellow', 'red'],
colors: ['black', 'black', 'coral', 'dodgerblue', 'forestgreen', 'blueviolet', 'gold'],
// iWantHue default soft
// colors: ['black', 'black', '#cb673e', '#648ace', '#5ba962', '#ab62c0', '#a9983d', '#c95779'],
// iWantHue fancy light hard
// colors: ['black', 'black', '#c2007a', '#59dacd', '#019a3f', '#793ec4', '#c9b800', '#c00613'],
// iWantHue fluo soft
// colors: ['black', 'black', '#cb5c42', '#648ace', '#60a85f', '#a361c7', '#b3953f', '#cb5c42'],
fillAlpha: .5,
animatedZooms: true,
highlightCircleSize: 6,
highlightSeriesBackgroundAlpha: .9,
// Disabled highlightSeriesOpts as it always seemed to highlight the first item in the series and is not very useful in a stacked graph
// highlightSeriesOpts: {
// strokeWidth: 4,
// highlightCircleSize: 6
// },
// labelsSeparateLines: true,
labelsShowZeroValues: false,
legend: 'always',
labelsKMG2: true
});
b = new Dygraph(
document.getElementById("bdiv"),
data, {
// Appears axisLabelColor is no longer supported in 2.0
// axisLabelColor: 'darkgrey',
// While logscale would be great here, it doesn't work with negative values
// logscale: true,
title: 'bandwidth',
titleHeight: 32,
axes: {
x: {
axisLabelFormatter: Dygraph.dateAxisLabelFormatter,
valueFormatter: function(ms){
var formattedDate = formatDate(ms);
return formattedDate;
},
ticker: Dygraph.dateTicker
}
},
xValueParser: function(x) {
return 1000 * x;
},
fillGraph: true,
visibility: [true, true, false, false, false, false, false, true],
// colors: ['green', 'blue'],
colors: ['forestgreen', 'dodgerblue', 'black', 'black', 'black', 'black', 'black', 'firebrick'],
fillAlpha: .5,
animatedZooms: true,
highlightSeriesBackgroundAlpha: .9,
highlightSeriesOpts: {
strokeWidth: 4,
highlightCircleSize: 6
},
labelsShowZeroValues: false,
// labels: ['in', 'out', 'guest'],
legend: 'always',
labelsKMG2: true
});
function formatDate(d) {
var stringDate = String(d);
var yyyy = stringDate.substring(0,4);
var MM = stringDate.substring(4,6);
var dd = stringDate.substring(6,8);
var HH = stringDate.substring(8,10);
var mm = stringDate.substring(10,12);
var ss = stringDate.substring(12,14);
return yyyy + "-" + MM + "-" + dd + " " + HH + ":" + mm + ":" + ss;
}
dygraph-label.dygraph-title {
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
// font-size: large;
color: white;
// color: floralwhite;
}
// .dygraph-label.dygraph-xlabel
// .dygraph-label.dygraph-ylabel
.dygraph-axis-label.dygraph-axis-label-x {
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
font-size: small;
}
.dygraph-axis-label.dygraph-axis-label-y {
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
font-size: small;
}
.dygraph-legend {
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
font-size: small !important;
color: white;
// color: floralwhite;
background: transparent !important;
// background: rgba(169, 169, 169, 0.4) !important;
left: auto !important;
// left: 60px !important;
// top: auto !important;
// bottom: 20px !important;
right: 10px !important;
// right: auto !important;
width: auto !important;
// text-align: right !important;
// overflow: visible !important;
z-index: auto !important;
}
#root {
left: 25px;
top: 50px;
right: 50px;
bottom: 50px;
position: absolute;
}
#qdiv {
width: 100%;
height: 50%;
}
#bdiv {
width: 100%;
height: 50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.js"></script>
<title>egress queues</title>
<body>
<div id="root">
<div id="qdiv"></div>
<p></p>
<div id="bdiv"></div>
</div>