如何突出显示dygraph中的日期区域?
How can I highlight a date area in dygraph?
我的代码:
<html>
<head>
<script type="text/javascript"
src="dygraph-combined-dev.js"></script>
<script>
$(document).ready(function () {
new Dygraph(
document.getElementById("graphdiv"),
function() {
var zp = function(x) { if (x < 10) return "0"+x; else return x; };
var r = "date,parabola,line,another line,sine wave'n";
for (var i=1; i<=31; i++) {
r += "200610" + zp(i);
r += "," + 10*(i*(31-i));
r += "," + 10*(8*i);
r += "," + 10*(250 - 8*i);
r += "," + 10*(125 + 125 * Math.sin(0.3*i));
r += "'n";
}
return r;
},
{
strokeWidth: 2,
'parabola': {
strokeWidth: 0.0,
drawPoints: true,
pointSize: 4,
highlightCircleSize: 6
},
'line': {
strokeWidth: 1.0,
drawPoints: true,
pointSize: 1.5
},
'sine wave': {
strokeWidth: 3,
highlightCircleSize: 10
}
}
);
}
);
</script>
</head>
<body>
<div id="graphdiv"></div>
<script type="text/javascript">
g = new Dygraph(
// containing div
document.getElementById("graphdiv"),
// CSV or path to a CSV file.
"Date,Close Price'n" +
"2015-09-17,5.20'n" +
"2015-09-16,5.31'n" +
"2015-09-15,5.40'n" +
"2015-09-14,5.20'n" +
"2015-09-11,5.17'n" +
"2015-09-10,5.20'n" +
"2015-09-09,5.09'n" +
"2015-09-08,5.05'n" +
"2015-09-07,4.90'n" +
"2015-09-04,4.74'n" +
"2015-09-03,4.68'n" +
"2015-09-02,4.24'n" +
"2015-09-01,4.20'n" +
"2015-08-31,4.06'n" +
"2015-08-28,4.19'n" +
"2015-08-27,4.08'n" +
"2015-08-26,4.20'n" +
"2015-08-25,4.04'n" +
"2015-08-24,3.53'n" +
"2015-08-21,4.30'n" +
"2015-08-20,4.45'n" +
"2015-08-19,4.58'n" +
"2015-08-18,4.54'n" +
"2015-08-17,4.63'n" +
"2015-08-14,4.49'n" +
"2015-08-13,4.56'n" +
"2015-08-12,4.69'n" +
"2015-08-11,4.80'n" +
"2015-08-10,4.65'n" +
"2015-08-07,4.40'n" +
"2015-08-06,4.24'n" +
"2015-08-05,3.98'n" +
"2015-08-04,3.84'n" +
"2015-08-03,3.66'n" +
"2015-07-31,4.71'n" +
"2015-07-30,4.71'n" +
"2015-07-29,4.71'n" +
"2015-07-28,4.71'n" +
"2015-07-27,4.71'n" +
"2015-07-24,4.71'n" +
"2015-07-23,4.71'n" +
"2015-07-22,4.71'n" +
"2015-07-21,4.71'n" +
"2015-07-20,4.71'n" +
"2015-07-17,4.71'n" +
"2015-07-16,4.71'n" +
"2015-07-15,4.71'n" +
"2015-07-14,4.71'n" +
"2015-07-13,4.71'n" +
"2015-07-10,4.71'n" +
"2015-07-09,4.71'n" +
"2015-07-08,4.71'n" +
"2015-07-07,4.71'n" +
"2015-07-06,4.71'n" +
"2015-07-03,4.71'n" +
"2015-07-02,4.71'n" +
"2015-07-01,4.71'n" +
"2015-06-30,4.71'n" +
"2015-06-29,4.71'n" +
"2015-06-26,4.71'n" +
"2015-06-25,4.45'n" +
"2015-06-24,4.43'n" +
"2015-06-23,4.41'n" +
"2015-06-22,4.14'n" +
"2015-06-19,3.84'n" +
"2015-06-18,3.65'n" +
"2015-06-17,3.63'n" +
"2015-06-16,4.23'n" +
"2015-06-15,4.49'n" +
"2015-06-12,4.74'n" +
"2015-06-11,5.04'n" +
"2015-06-10,4.75'n" +
"2015-06-09,4.75'n" +
"2015-06-08,4.61'n" +
"2015-06-05,4.69'n" +
"2015-06-04,4.91'n" +
"2015-06-03,4.94'n" +
"2015-06-02,4.68'n" +
"2015-06-01,4.56'n" +
"2015-05-29,4.56'n" +
"2015-05-28,4.96'n" +
"2015-05-27,5.29'n" +
"2015-05-26,4.75'n" +
"2015-05-25,4.88'n" +
"2015-05-22,5.06'n" +
"2015-05-21,5.18'n" +
"2015-05-20,5.07'n" +
"2015-05-19,5.28'n" +
"2015-05-18,5.26'n" +
"2015-05-15,4.95'n" +
"2015-05-14,5.00'n" +
"2015-05-13,5.18'n" +
"2015-05-12,5.49'n" +
"2015-05-11,5.50'n" +
"2015-05-08,5.74'n" +
"2015-05-07,5.84'n" +
"2015-05-06,5.60'n" +
"2015-05-05,5.28'n" +
"2015-05-04,5.80'n" +
"2015-05-01,5.99'n" +
"2015-04-30,5.99'n" +
"2015-04-29,5.46'n" +
"2015-04-28,5.58'n" +
"2015-04-27,5.45'n" +
"2015-04-24,4.97'n" +
"2015-04-23,4.87'n" +
"2015-04-22,4.57'n" +
"2015-04-21,4.30'n" +
"2015-04-20,4.85'n" +
"2015-04-17,4.86'n" +
"2015-04-16,5.09'n" +
"2015-04-15,4.80'n" +
"2015-04-14,5.00'n" +
"2015-04-13,5.45'n" +
"2015-04-10,5.45'n" +
"2015-04-09,5.45'n" +
"2015-04-08,5.38'n" +
"2015-04-07,5.42'n" +
"2015-04-06,5.50'n" +
"2015-04-03,5.50'n" +
"2015-04-02,5.50'n" +
"2015-04-01,5.49'n" +
"2015-03-31,5.70'n" +
"2015-03-30,5.80'n" +
"2015-03-27,5.68'n" +
"2015-03-26,5.40'n" +
"2015-03-25,5.83'n" +
"2015-03-24,5.83'n" +
"2015-03-23,5.30'n" +
"2015-03-20,5.01'n" +
"2015-03-19,4.84'n" +
"2015-03-18,4.90'n" +
"2015-03-17,5.13'n" +
"2015-03-16,4.91'n" +
"2015-03-13,5.18'n" +
"2015-03-12,5.53'n" +
"2015-03-11,5.58'n" +
"2015-03-10,5.70'n" +
"2015-03-09,5.60'n" +
"2015-03-06,6.15'n" +
"2015-03-05,6.19'n" +
"2015-03-04,6.40'n" +
"2015-03-03,6.32'n" +
"2015-03-02,6.51'n" +
"2015-02-27,7.00'n" +
"2015-02-26,7.30'n" +
"2015-02-25,7.50'n" +
"2015-02-24,6.88'n" +
"2015-02-23,6.05'n" +
"2015-02-20,6.05'n" +
"2015-02-19,6.09'n" +
"2015-02-18,5.90'n" +
"2015-02-17,5.98'n" +
"2015-02-16,6.00'n" +
"2015-02-13,6.20'n" +
"2015-02-12,5.54'n" +
"2015-02-11,5.25'n" +
"2015-02-10,5.64'n" +
"2015-02-09,5.18'n" +
"2015-02-06,5.15'n" +
"2015-02-05,5.27'n" +
"2015-02-04,5.50'n" +
"2015-02-03,5.69'n" +
"2015-02-02,5.12'n" +
"2015-01-30,4.80'n" +
"2015-01-29,4.78'n" +
"2015-01-28,4.45'n" +
"2015-01-27,5.17'n" +
"2015-01-26,5.82'n" +
"2015-01-23,5.63'n" +
"2015-01-22,5.16'n" +
"2015-01-21,4.94'n" +
"2015-01-20,5.18'n" +
"2015-01-19,5.20'n" +
"2015-01-16,4.77'n" +
"2015-01-15,4.90'n" +
"2015-01-14,5.03'n" +
"2015-01-13,5.31'n" +
"2015-01-12,5.20'n" +
"2015-01-09,4.93'n" +
"2015-01-08,4.76'n" +
"2015-01-07,4.97'n" +
"2015-01-06,5.07'n" +
"2015-01-05,5.07'n" +
"2015-01-02,5.55'n" +
"2015-01-01,5.40'n" +
"2015-10-28,10"
);
</script>
</body>
</html>
这是一个图表。现在我想突出显示一个日期区域，就像下面的教程示例一样:http://dygraphs.com/...hlighted-region
我的问题是，我不知道如何使用日期。例如，2015-01-01到2015-10-28为highlight_start/highlight_end。
如何在我的例子中突出显示2015-01-01到2015-10-28的日范围?
谢谢。
对不起，我第一次误解了你的问题。它现在应该绘制CSV数据的图形，然后突出显示指定的日期范围。(你会注意到整个图是黄色的——这是因为highlight_start和highlight_end比你的数据集大)
var csvData = function() {
return "Date,Close Price'n" +
"2015-09-17,5.20'n" +
"2015-09-16,5.31'n" +
"2015-09-15,5.40'n" +
"2015-09-14,5.20'n" +
"2015-09-11,5.17'n" +
"2015-09-10,5.20'n" +
"2015-09-09,5.09'n" +
"2015-09-08,5.05'n" +
"2015-09-07,4.90'n" +
"2015-09-04,4.74'n" +
"2015-09-03,4.68'n" +
"2015-09-02,4.24'n" +
"2015-09-01,4.20'n" +
"2015-08-31,4.06'n" +
"2015-08-28,4.19'n" +
"2015-08-27,4.08'n" +
"2015-08-26,4.20'n" +
"2015-08-25,4.04'n" +
"2015-08-24,3.53'n" +
"2015-08-21,4.30'n" +
"2015-08-20,4.45'n" +
"2015-08-19,4.58'n" +
"2015-08-18,4.54'n" +
"2015-08-17,4.63'n" +
"2015-08-14,4.49'n" +
"2015-08-13,4.56'n" +
"2015-08-12,4.69'n" +
"2015-08-11,4.80'n" +
"2015-08-10,4.65'n" +
"2015-08-07,4.40'n" +
"2015-08-06,4.24'n" +
"2015-08-05,3.98'n" +
"2015-08-04,3.84'n" +
"2015-08-03,3.66'n" +
"2015-07-31,4.71'n" +
"2015-07-30,4.71'n" +
"2015-07-29,4.71'n" +
"2015-07-28,4.71'n" +
"2015-07-27,4.71'n" +
"2015-07-24,4.71'n" +
"2015-07-23,4.71'n" +
"2015-07-22,4.71'n" +
"2015-07-21,4.71'n" +
"2015-07-20,4.71'n" +
"2015-07-17,4.71'n" +
"2015-07-16,4.71'n" +
"2015-07-15,4.71'n" +
"2015-07-14,4.71'n" +
"2015-07-13,4.71'n" +
"2015-07-10,4.71'n" +
"2015-07-09,4.71'n" +
"2015-07-08,4.71'n" +
"2015-07-07,4.71'n" +
"2015-07-06,4.71'n" +
"2015-07-03,4.71'n" +
"2015-07-02,4.71'n" +
"2015-07-01,4.71'n" +
"2015-06-30,4.71'n" +
"2015-06-29,4.71'n" +
"2015-06-26,4.71'n" +
"2015-06-25,4.45'n" +
"2015-06-24,4.43'n" +
"2015-06-23,4.41'n" +
"2015-06-22,4.14'n" +
"2015-06-19,3.84'n" +
"2015-06-18,3.65'n" +
"2015-06-17,3.63'n" +
"2015-06-16,4.23'n" +
"2015-06-15,4.49'n" +
"2015-06-12,4.74'n" +
"2015-06-11,5.04'n" +
"2015-06-10,4.75'n" +
"2015-06-09,4.75'n" +
"2015-06-08,4.61'n" +
"2015-06-05,4.69'n" +
"2015-06-04,4.91'n" +
"2015-06-03,4.94'n" +
"2015-06-02,4.68'n" +
"2015-06-01,4.56'n" +
"2015-05-29,4.56'n" +
"2015-05-28,4.96'n" +
"2015-05-27,5.29'n" +
"2015-05-26,4.75'n" +
"2015-05-25,4.88'n" +
"2015-05-22,5.06'n" +
"2015-05-21,5.18'n" +
"2015-05-20,5.07'n" +
"2015-05-19,5.28'n" +
"2015-05-18,5.26'n" +
"2015-05-15,4.95'n" +
"2015-05-14,5.00'n" +
"2015-05-13,5.18'n" +
"2015-05-12,5.49'n" +
"2015-05-11,5.50'n" +
"2015-05-08,5.74'n" +
"2015-05-07,5.84'n" +
"2015-05-06,5.60'n" +
"2015-05-05,5.28'n" +
"2015-05-04,5.80'n" +
"2015-05-01,5.99'n" +
"2015-04-30,5.99'n" +
"2015-04-29,5.46'n" +
"2015-04-28,5.58'n" +
"2015-04-27,5.45'n" +
"2015-04-24,4.97'n" +
"2015-04-23,4.87'n" +
"2015-04-22,4.57'n" +
"2015-04-21,4.30'n" +
"2015-04-20,4.85'n" +
"2015-04-17,4.86'n" +
"2015-04-16,5.09'n" +
"2015-04-15,4.80'n" +
"2015-04-14,5.00'n" +
"2015-04-13,5.45'n" +
"2015-04-10,5.45'n" +
"2015-04-09,5.45'n" +
"2015-04-08,5.38'n" +
"2015-04-07,5.42'n" +
"2015-04-06,5.50'n" +
"2015-04-03,5.50'n" +
"2015-04-02,5.50'n" +
"2015-04-01,5.49'n" +
"2015-03-31,5.70'n" +
"2015-03-30,5.80'n" +
"2015-03-27,5.68'n" +
"2015-03-26,5.40'n" +
"2015-03-25,5.83'n" +
"2015-03-24,5.83'n" +
"2015-03-23,5.30'n" +
"2015-03-20,5.01'n" +
"2015-03-19,4.84'n" +
"2015-03-18,4.90'n" +
"2015-03-17,5.13'n" +
"2015-03-16,4.91'n" +
"2015-03-13,5.18'n" +
"2015-03-12,5.53'n" +
"2015-03-11,5.58'n" +
"2015-03-10,5.70'n" +
"2015-03-09,5.60'n" +
"2015-03-06,6.15'n" +
"2015-03-05,6.19'n" +
"2015-03-04,6.40'n" +
"2015-03-03,6.32'n" +
"2015-03-02,6.51'n" +
"2015-02-27,7.00'n" +
"2015-02-26,7.30'n" +
"2015-02-25,7.50'n" +
"2015-02-24,6.88'n" +
"2015-02-23,6.05'n" +
"2015-02-20,6.05'n" +
"2015-02-19,6.09'n" +
"2015-02-18,5.90'n" +
"2015-02-17,5.98'n" +
"2015-02-16,6.00'n" +
"2015-02-13,6.20'n" +
"2015-02-12,5.54'n" +
"2015-02-11,5.25'n" +
"2015-02-10,5.64'n" +
"2015-02-09,5.18'n" +
"2015-02-06,5.15'n" +
"2015-02-05,5.27'n" +
"2015-02-04,5.50'n" +
"2015-02-03,5.69'n" +
"2015-02-02,5.12'n" +
"2015-01-30,4.80'n" +
"2015-01-29,4.78'n" +
"2015-01-28,4.45'n" +
"2015-01-27,5.17'n" +
"2015-01-26,5.82'n" +
"2015-01-23,5.63'n" +
"2015-01-22,5.16'n" +
"2015-01-21,4.94'n" +
"2015-01-20,5.18'n" +
"2015-01-19,5.20'n" +
"2015-01-16,4.77'n" +
"2015-01-15,4.90'n" +
"2015-01-14,5.03'n" +
"2015-01-13,5.31'n" +
"2015-01-12,5.20'n" +
"2015-01-09,4.93'n" +
"2015-01-08,4.76'n" +
"2015-01-07,4.97'n" +
"2015-01-06,5.07'n" +
"2015-01-05,5.07'n" +
"2015-01-02,5.55'n" +
"2015-01-01,5.40'n" +
"2015-10-28,10";
};
$(document).ready(function () {
// Get your data from somewhere
var data = csvData();
// Set highlight start and end
var highlight_start = new Date('2015/01/01');
var highlight_end = new Date('2015/10/28');
g = new Dygraph(
document.getElementById("graphdiv"),
data,
{
animatedZooms: true,
underlayCallback: function(canvas, area, g) {
var bottom_left = g.toDomCoords(highlight_start,0);
var top_right = g.toDomCoords(highlight_end,2500);
console.log(bottom_left);
console.log(top_right);
var left = bottom_left[0];
var right = top_right[0];
canvas.fillStyle = "rgba(255, 255, 102, 1.0)";
canvas.fillRect(left, area.y, right - left, area.h);
}
}
);
});
[JSFiddle]如果你想看到它运行。基本上我所做的是从你提到的例子中复制underlayCallback函数。然后我调整它来处理日期。
这是由…
var highlight_start = new Date('2015/01/01');
var highlight_end = new Date('2015/10/28');
然后我将这些输入underlayCallback，用于确定canvas.fillRect函数的坐标。
正如我之前提到的，这些数据范围比你的数据集大。无论如何，您需要做的就是将这些数据字符串调整为该格式样式以获得所需的结果。
相关文章：
- 分析特定区域设置(而不是时区！）中的日期字符串
- 使用不同的日期格式和区域设置创建时刻
- 如何从区域设置获取日期格式
- 如何使日期区域设置正常工作
- 使用区域设置更改日期格式
- 如何根据用户区域设置数字和日期的格式
- 分机.js日期格式区域设置
- 引导日期选择器在文本区域中不起作用
- 文本区域只读自动高度(用所选日期填充）
- 从特定区域设置的角度日期过滤器输出格式化日期
- 区域设置和特定日期格式与时刻.js
- 时刻.js将文本解析为日期似乎与区域设置不匹配
- 如何显示用户使用文本区域的日期和时间(单击时与本地存储一起保存）
- 指定哪个区域是要排序的日期
- moment.js:格式化日期以保持区域设置's的日期、月份和年份顺序
- Eonasdan日期时间选择器区域设置不起作用
- 不带年份的区域设置特定日期
- 通过区域设置代码javascript获取日期格式
- 使用区域设置信息的JavaScript日期格式转换
- 如何突出显示dygraph中的日期区域?
