javascript - 如何通过canvas.js中的AJAX调用获取输入以对数比例绘制图形

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>

在这里，我尝试使用canvas.js绘制图形。我正在使用AJAX调用从外部API获取输入。并将变量X和Y存储在数组中。将其作为该canvasjs库的输入来绘制图形。但是我无法绘制图形。上面的代码段是我所做的。

最佳答案

图表未呈现，因为在实际加载数据之前调用了render方法。

“ 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>

关于javascript - 如何通过canvas.js中的AJAX调用获取输入以对数比例绘制图形，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45998081/