javascript - 如何通过从 canvasjs 中的 AJAX 调用获取输入来绘制具有对数刻度的图形

Question

window.onload = function() {
  var dataPoints = [];
  // fetching the json data from api via AJAX call.
  var X = [];
  var Y = [];
  var data = [];

  function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', ' https://api.myjson.com/bins/cixax', true);
    xobj.onreadystatechange = function() {
      if (xobj.readyState == 4 && xobj.status == "200") {
        callback(xobj.responseText);
      }
    }
    xobj.send(null);
  }
  loadJSON(function(response) {
    var response;
    var field = JSON.parse(response);
    var values = [];
    //Iterating and storing leads & visits in a variable.
    var $this = field;
    for (var key in $this) {
      if ($this.hasOwnProperty(key)) {
        var data = $this[key].dates;
        for (var val in data) {
          values.push({
            "X": data[val].visits,
            "Y": data[val].leads
          });
        }
      }
    }
    dataPoints = ({
      "values": values
    });
  });

  var chart = new CanvasJS.Chart("chartContainer", {
    title: {
      text: "Log Scale on Axis Y - Workaround using Linear Axis"
    },
    axisY: {
      //valueFormatString: "0.## E0",
      title: "In log scale",
      labelFormatter: function(e) {
        var lable = Math.pow(10, e.value);
        if (lable >= 1000)
          lable = CanvasJS.formatNumber(lable / 1000) + "k";
        else
          lable = CanvasJS.formatNumber(lable);
        return lable;
      },
      interval: 1,
      includeZero: false
    },
    toolTip: {
      contentFormatter: function(e) {
        var content = "Data Values";
        for (var i = 0; i < e.entries.length; i++) {
          content += "</br>" + e.entries[i].dataPoint.x + " : ";
          content += CanvasJS.formatNumber(Math.round(Math.pow(10, e.entries[i].dataPoint.y)));
        }
        return content;
      }
    },
    data: [{
      type: "line",
      dataPoints: []
    }]
  }); convertToLog(chart.options.data); chart.render();

  function convertToLog(data) {
    var dataPoints;
    for (var j = 0; j < data.length; j++) {
      dataPoints = data[j].dataPoints;
      for (var i = 0; i < dataPoints.length; i++) {
        dataPoints[i].y = Math.log10(dataPoints[i].y);
      }
    }
  }
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

我在这里尝试使用 canvasjs 绘制图形。我正在使用 AJAX 调用从外部 API 获取输入。并将变量 X 和 Y 存储在数组中。将其作为用于绘制图形的 canvasjs 库的输入提供。但我无法绘制图表。上面的代码片段是我完成的。

Answer 1

图表未被渲染，因为渲染方法在数据实际加载之前被调用。

“x”和“y”应该小写而不是大写。该图看起来乱七八糟，因为您的 JSON 中的 X 值未排序。

由于库现在支持 Y 轴上的对数刻度，您可以使用它来代替变通方法。这里是 documentation link .

window.onload = function() {
  //var dataPoints = [];
  // fetching the json data from api via AJAX call.
  var X = [];
  var Y = [];
  var data = [];

  function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'https://api.myjson.com/bins/cixax', true);
    xobj.onreadystatechange = function() {
      if (xobj.readyState == 4 && xobj.status == "200") {
        callback(xobj.responseText);
      }
    }
    xobj.send(null);
  }
  loadJSON(function(response) {
    var response;
    var field = JSON.parse(response);
    var values = [];
    //Iterating and storing leads & visits in a variable.
    var $this = field;
    for (var key in $this) {
      if ($this.hasOwnProperty(key)) {
        var data = $this[key].dates;
        for (var val in data) {
          values.push({
            "x": data[val].visits, // Should be "x" & "y"
            "y": data[val].leads 
          });
        }
      }
    }
    //dataPoints = ({
    //  "values": values
    //});
    
    // Update the dataPoints & render the chart
    // x values need to be in sorted order
    chart.options.data[0].dataPoints = values;
    
    chart.render();
  });

  var chart = new CanvasJS.Chart("chartContainer", {
    title: {
      text: "Log Scale on Axis Y - Workaround using Linear Axis"
    },
    axisY: {
      //valueFormatString: "0.## E0",
      title: "In log scale",
      labelFormatter: function(e) {
        var lable = Math.pow(10, e.value);
        if (lable >= 1000)
          lable = CanvasJS.formatNumber(lable / 1000) + "k";
        else
          lable = CanvasJS.formatNumber(lable);
        return lable;
      },
      interval: 1,
      includeZero: false
    },
    toolTip: {
      contentFormatter: function(e) {
        var content = "Data Values";
        for (var i = 0; i < e.entries.length; i++) {
          content += "</br>" + e.entries[i].dataPoint.x + " : ";
          content += CanvasJS.formatNumber(Math.round(Math.pow(10, e.entries[i].dataPoint.y)));
        }
        return content;
      }
    },
    data: [{
      type: "line",
      dataPoints: []
    }]
  }); //convertToLog(chart.options.data); chart.render();

  function convertToLog(data) { 
    var dataPoints;
    for (var j = 0; j < data.length; j++) {
      dataPoints = data[j].dataPoints;
      for (var i = 0; i < dataPoints.length; i++) {
        dataPoints[i].y = Math.log10(dataPoints[i].y);
      }
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>