我有dygraph工作。 目前，x轴粒度为1天，轴上显示的格式为ddMMM，例如： 02May。 我也希望展示这一天，例如5月2日星期五。
我该怎么做？
谢谢
包含JavaScript的HTML页面：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Temperature(°C) vs Time</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4rc2.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="http://dygraphs.com/dygraph-combined.js"></script>
<style type='text/css'>
</style>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
var r = [ ];
var base_time = Date.parse("2014/03/05");
var num = 24 * 0.25 * 365;
for (var i = 0; i < num; i++) {
r.push([ new Date(base_time + i * 3600 * 1000),
i + 50 * (i % 60), // line
i * (num - i) * 4.0 / num // parabola
]);
}
var orig_range = [ r[0][0].valueOf(), r[r.length - 1][0].valueOf() ];
// NEW CODE INSERTED - STARTS
var one_month_previous = new Date();
one_month_previous.setMonth(one_month_previous.getMonth() - 1);
var one_week_previous = new Date();
one_week_previous.setDate(one_week_previous.getDate()-7);
var three_days_previous = new Date();
three_days_previous.setDate(three_days_previous.getDate()-3);
var one_days_previous = new Date();
one_days_previous.setDate(one_days_previous.getDate()-1);
var twelve_hours_previous = new Date();
twelve_hours_previous.setHours(twelve_hours_previous.getHours() - 12);
// NEW CODE INSERTED - ENDS
var d_names = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
var m_names = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
g = new Dygraph(
document.getElementById("graphdiv3"),
"show_csv.php",
{
// NEW CODE INSERTED - STARTS
// dateWindow: [ Date.parse(one_month_previous) ,
// Date.parse(new Date()) ],
dateWindow: [ Date.parse(one_week_previous) ,
Date.parse(new Date()) ],
// dateWindow: [ Date.parse(three_days_previous) ,
// Date.parse(new Date()) ],
// dateWindow: [ Date.parse(one_days_previous) ,
// Date.parse(new Date()) ],
// dateWindow: [ Date.parse(twelve_hours_previous) ,
// Date.parse(new Date()) ],
// dateWindow: [ Date.parse("2014/03/01 12:00:00"),
// Date.parse("2014/03/31 12:00:00") ],
// NEW CODE INSERTED - ENDS
title: 'Temperature(°C) vs Time',
rollPeriod: 1,
showRoller: true,
xlabel: '',
ylabel: 'Temperature (°C)',
legend: 'always',
labelsKMB: 'true',
labelsSeparateLines: 'true',
colors: [
"rgb(51,204,204)",
"#00DD55",
"rgb(255,100,100)",
"rgba(50,50,200,0.4)"],
axes: {
x: {
axisLabelFormatter: function(d, gran) {
var curr_day = d_names[d.getDay()];
var curr_month = m_names[d.getMonth()];
return curr_day + " "
+ Dygraph.zeropad(d.getDate())
+ curr_month;
}
}
}
//
//
// below works
//
// axes: {
// x: {
// valueFormatter: function(x) {
// return 'text';
// },
// axisLabelFormatter: function(x) {
// return x;
// },
// }
// }
//
}
);
var desired_range = null;
function approach_range() {
if (!desired_range) return;
// go halfway there
var range = g.xAxisRange();
if (Math.abs(desired_range[0] - range[0]) < 60 &&
Math.abs(desired_range[1] - range[1]) < 60) {
g.updateOptions({dateWindow: desired_range});
// g.updateOptions(
// {dateWindow: desired_range,
//axes: {
// x: {
// axisLabelFormatter: function(d, gran) {
// var curr_day = d_names[d.getDay()];
// var curr_month = m_names[d.getMonth()];
// return curr_day + " "
// + Dygraph.zeropad(d.getDate())
// + curr_month;
// }
// }
// }
//});
// (do not set another timeout.)
} else {
var new_range;
new_range = [0.5 * (desired_range[0] + range[0]),
0.5 * (desired_range[1] + range[1])];
g.updateOptions({dateWindow: new_range});
// g.updateOptions(
//
//{dateWindow: new_range, axes: {
// x: {
// axisLabelFormatter: function(d, gran) {
// var curr_day = d_names[d.getDay()];
// var curr_month = m_names[d.getMonth()];
// return curr_day + " "
// + Dygraph.zeropad(d.getDate())
// + curr_month;
// }
// }
// }}
//);
animate();
}
}
function animate() {
setTimeout(approach_range, 50);
}
var zoom = function(res) {
var w = g.xAxisRange();
desired_range = [ w[0], w[0] + res * 1000 ];
animate();
}
var reset = function() {
desired_range = orig_range;
animate();
}
var pan = function(dir) {
var w = g.xAxisRange();
var scale = w[1] - w[0];
var amount = scale * 0.25 * dir;
desired_range = [ w[0] + amount, w[1] + amount ];
animate();
}
document.getElementById('hour').onclick = function() { zoom(3600); };
document.getElementById('day').onclick = function() { zoom(86400); };
document.getElementById('week').onclick = function() { zoom(604800); };
document.getElementById('month').onclick = function() { zoom(30 * 86400); };
document.getElementById('full').onclick = function() { reset(); };
document.getElementById('left').onclick = function() { pan(-1); };
document.getElementById('right').onclick = function() { pan(+1); };
}
);
//]]>
</script>
</head>
<body>
<center>
<div id="graphdiv3"
style="width:900px; height:400px;"></div>
</center>
<p>
<br>
<center>
<b>Zoom:</b>
<button id="hour">hour</button>
<button id="day">day</button>
<button id="week">week</button>
<button id="month">month</button>
<button id="full">full</button>
<br> or, click & drag. Double-click to zoom back out.
<br>
<b>Pan:</b>
<button id="left">left</button>
<button id="right">right</button>
or, shift & drag.
<br>
<b>Raw Data:</b>
<button onclick="window.location.href='show_csv_raw_data.php'">raw</button>
<!--
<b>Zoom:</b>
<a href="#" id="hour">hour</a>
<a href="#" id="day">day</a>
<a href="#" id="week">week</a>
<a href="#" id="month">month</a>
<a href="#" id="full">full</a>
<b>Pan:</b>
<a href="#" id="left">left</a>
<a href="#" id="right">right</a>
-->
<br>
<br>Measurements every 15 mins. Refresh with F5 button for update.
<br>Your last page refresh was on <b><span id="long_date"></span></b>
<script type='text/javascript'>
var datetime = new Date();
document.getElementById("long_date").innerHTML=datetime;
</script>
</center>
<br>
<br>
Notes:
<br> 1. Measurements before 19<sup>th</sup> March: Hall Cupboard was "Inside" sitting on Rasp Pi, Loft was just "Inside window", Hall was external temp measurement, "Outside window"
<br> 2. Mar 31<sup>st</sup>, green line, shows loft temp rise of ~8°C(8am) to 17°C(3pm), Δ ~ 9°C, in zero octave cloud/ direct sunlight conditions. Direct lift in hall temperature, red line, while heating off clear. Indicative that solar heating of loft as thermal barrier worthwhile.
<br> 3. April 3<sup>rd</sup>, red line, shows hall temp rise of ~14°C(17:45) to 20°C(19:45), Δ ~ 5°C, in two hours while loft temprature remains fairly constant (flat) ie no solar gain. Shows heating performance of approximately 2.5°C per hour
<br> 4. April 20<sup>th</sup>. Raw data can be viewed.
<br> 5. April 29<sup>th</sup>. Heating is off: the evening of Friday 25<sup>th</sup>, all of Sat 26<sup>th</sup>, all of Sun 27<sup>th</sup> and early morning Mon 28<sup>th</sup>. Consequences of heating off can be seen.
<br>6. April 29<sup>th</sup>. Loft space (green line) heats, with keroscene space heating off, through black colour concerete tiles, in zero octave cloud/ direct sunlight conditions. Solar gain is
<dl>
<dd>o Loft temp rise of ~7 °C(6:30am) to 20.9°C(5:30pm), Δ ~ 14°C, <i>and</i> </dd>
<dd>o Hall way temp rise of ~11.4°C(6:30am) to 15.6°C(5:30pm), Δ ~ 4°C </dd>
<br>
<dd> Conversion = 0.3°C rise in Hall way temperature per 1.0°C rise in loft space temperature</dd>
<br>
<dd>See solar (black-body) space heating ideas <a href="http://bit.ly/solar-air-heating" target="_blank">http://bit.ly/solar-air-heating</a> </dd>
</dl>
7.
</p>
<div id="div_g"></div>
<br>
<br>
<iframe width="300" height="200" style="border: 1px solid #cccccc;" src="http://api.thingspeak.com/channels/11286/charts/3?width=450&height=260&results=1000&dynamic=true&yaxis=Hall&title=Hall%20Temp" ></iframe>
<iframe width="300" height="200" style="border: 1px solid #cccccc;" src="http://api.thingspeak.com/channels/11286/charts/1?width=450&height=260&results=1000&dynamic=true&yaxis=Hall%20Cupboard&title=Hall%20Cupboard%20Temp" ></iframe>
<iframe width="300" height="200" style="border: 1px solid #cccccc;" src="http://api.thingspeak.com/channels/11286/charts/2?width=450&height=260&results=1000&dynamic=true&yaxis=Loft&title=Loft%20Temp" ></iframe>
</body>
</html>
答案 0 :(得分：0)
使用axisLabelFormatter属性并根据需要格式化日期
var d_names = ["Sun","Mon", "Tue", "Wed",
"Thu", "Fri", "Sat"];
var m_names = ["Jan", "Fe", "Mar",
"Apr", "May", "Jun", "Jul", "Aug", "Sep",
"Oct", "Novr", "Dec"];
var g3 = new Dygraph(
document.getElementById("g_div"),
DailyData(),
{
xAxisLabelWidth: 80,
axisLabelFontSize: 12,
width: 640,
height: 350,
axes: {
x: {
axisLabelFormatter: function(d, gran) {
var curr_day = d_names[d.getDay()];
var curr_month = m_names[d.getMonth()];
return curr_day + " "
+ Dygraph.zeropad(d.getDate())
+ curr_month;
}
}
}
});
这是 DEMO