如何在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>

在這裏，我想提請使用canvasjs圖正從AJAX調用輸入繪製對數刻度圖。我使用AJAX調用從外部API獲取輸入。並將變量X和Y存儲在數組中。將其作爲該畫布庫的輸入來繪製圖形。但我無法繪製圖表。上面的片段是我所做的。

Answer 1

圖表未呈現，因爲在實際加載數據之前調用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>