Question

暂时使用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不是我强大的套件。

谢谢。

Answer 1

正如我之前所说，代码中唯一没有用的是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>

Answer 2

我已经阅读了dygraphs的文档，我发现valueparser在x块中使用，没有x前缀。你能试试吗？

axes: {
  x: {
    axisLabelFormatter: Dygraph.dateAxisLabelFormatter,
    valueParser: function (x) { return 1000 * x; },
    valueFormatter: Dygraph.dateValueFormatter,
    ticker: Dygraph.dateTicker
  }
},

如果它不起作用，您可以检查浏览器的javascript控制台是否显示任何错误。

Answer 3

我检查了你的代码，现在一切正常，除了＆＃34; valueFormatter：Dygraph.dateValueFormatter＆＃34;线。如果您对此行进行注释，则所有错误都会消失，除非该值未在标签中进行格式化。尝试采用此路径来找到解决方案

日期格式中断2.0.0

3 个答案: