は、どのように私はcanvasjsを使ってグラフを描画しようとしていますcanvasjs

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>

ここでAJAX呼び出しからの入力を取得することにより、対数スケールでグラフ描画します。私は外部APIからAJAX呼び出しを使用して入力を取得しています。変数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>