1

我正在尝试使用 CanvasJS 库生成范围条形图。

我看过几个范围条形图的演示，但没有一个使用日期范围 - 不确定这是否是一个问题，或者这是否可能。

只是为了让它更难我动态地创建它 - 我需要从 html span 元素中检索日期值。

下面是我的代码：

window.onload = function() {
  var chart = new CanvasJS.Chart("chartContainer", {
    title: {
      text: "Task Timeline"
    },
    axisY: {
      includeZero: false,
      interval: 2,
      valueFormatString: "DD-MMM-YYYY",
      minimum: $(".StartDateCase").text(),
      maximum: $(".EndDateCase").text()
    },
    axisX: {
      interval: 1,
      minimum: 0
    },
    data: [{
      type: "rangeBar",
      yValueFormatString: "DD-MM-YYYY",
      dataPoints: [{
        x: "1",
        y: [new Date($(".StartDate1").text()), new Date($(".DueDate1").text())]
      }, {
        x: "2",
        y: [new Date($(".StartDate2").text()), new Date($(".DueDate2").text())]
      }, {
        x: "3",
        y: [new Date($(".StartDate3").text()), new Date($(".DueDate3").text())]
      }, ]
    }]
  });
  chart.render();
}
span {
  display: none;
}
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="chartContainer" style="height: 300px; width: 100%;"></div>

<span class="StartDate1">2015,01,19</span>
<span class="DueDate1">2015,01,20</span>
<span class="StartDate2">2015,01,21</span>
<span class="DueDate2">2015,01,23</span>
<span class="StartDate3">2015,01,26</span>
<span class="DueDate3">2015,01,26</span>
<span class="StartDateCase">2015,01,07</span>
<span class="EndDateCase">2015,02,28</span>

谁能帮我吗？

4

0 回答 0