堆栈内存溢出
  繁体   English   中英

如何在笔画中突出显示日期区域？

[英]How can I highlight a date area in dygraph?

 原文  2015-09-18 21:57:18  9   1    javascript/ graph/ highlight

问题描述

我的代码： 

<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在我的例子吗？

谢谢。

1 个解决方案

解决方案1
 0 已采纳  2015-09-18 22:31:35

不好意思，我第一次来时误解了你的问题。 现在，它应以图形方式显示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函数的坐标。

如前所述，这些数据范围大于您的数据集。 无论您需要做的是以那种格式样式调整那些数据字符串，以获得所需的结果。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在笔画中添加注释？ 如何更改笔画中的x轴位置？ 如何在笔形图中设置多个Y轴？ 日期比昨天晚，我如何突出显示一行 Dygraph - 如何更改日期格式的语言？ Dygraph - 仅突出显示线下方的区域或多色背景取决于 Y 轴值 Dygraph-是否可以创建面积图？ dygraph的值格式化功能如何将日期从纪元更改为本地 如何在笔画中以水平方式突出显示特定区域以及如何创建动态图 如何突出显示文本框中的文本？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM