带日期选择器和范围选择器的 CanvasJS 折线图使用 Api

Question

所以，我有一个类似的代码：https://jsfiddle.net/canvasjs/zxrkh502/ 但是我需要从 ajax/json 而不是 randomData 函数中放置数据。我该怎么做？

var dps = [];

var chart = new CanvasJS.Chart("chartContainer",
 {
  title: {
   text: "Chart with Date Selector"
  },
  data: [
  {
     type: "line",
     dataPoints: randomData(new Date(2017, 0, 1), 400)
    }
  ]
});
chart.render();

   etc...

谢谢！

Answer 1

先调用ajax，构建数据数组，
然后继续其余的代码。

请参阅以下代码片段...

$.ajax({
  url: 'http://get-data-url',
  type: 'GET',
  headers: {accept: 'application/json;odata=verbose;'}})
.done(drawChart)
.fail(function (jqXHR, status, errorThrown) {
  console.log('problem loading data: ' + errorThrown);
});

function drawChart(data) {
  var dps = [];

  $.each(data, function (rowIndex, row) {
    dps.push({
      x: row.xValue,
      y: row.yValue
    });
  });

  var chart = new CanvasJS.Chart("chartContainer",
    {
    title: {
      text: "Chart with Date Selector"
    },
    data: [
      {
        type: "line",
        dataPoints: dps
      }
    ]
  });
  chart.render();

  var axisXMin = chart.axisX[0].get("minimum");
  var axisXMax = chart.axisX[0].get("maximum");

  $("#fromDate").val(CanvasJS.formatDate(axisXMin, "DD MMM YYYY"));
  $("#toDate").val(CanvasJS.formatDate(axisXMax, "DD MMM YYYY"));
  $("#fromDate").datepicker({dateFormat: "d M yy"});
  $("#toDate").datepicker({dateFormat: "d M yy"});

  $("#date-selector").change( function() {
    var minValue = $( "#fromDate" ).val();
    var maxValue = $ ( "#toDate" ).val();

    if(new Date(minValue).getTime() < new Date(maxValue).getTime()){
      chart.axisX[0].set("minimum", new Date(minValue));
      chart.axisX[0].set("maximum", new Date(maxValue));
    }
  });

  $(".period").click( function() {
    var period = this.id;
    var minValue;
    minValue = new Date(axisXMax);

    switch(period){
      case "1m":
        minValue.setMonth(minValue.getMonth() - 1);
        break;
      case "3m":
        minValue.setMonth(minValue.getMonth() - 3);
        break;
      case "6m":
        minValue.setMonth(minValue.getMonth() - 6);
        break;
      case "1y":
        minValue.setYear(minValue.getFullYear() - 1);
        break;
      default:
        minValue = axisXMin;
    }

    chart.axisX[0].set("minimum", new Date(minValue));
    chart.axisX[0].set("maximum", new Date(axisXMax));
  });
}

带日期选择器和范围选择器的 CanvasJS 折线图使用 Api

CanvasJS Line Chart with Date Selector & Range Selector Using Api

javascript

ajax

charts

date-range

canvasjs