使用 AmCharts 从从 localStorage 检索的 JSON 对象创建条形图

Using AmCharts to create bar chart from JSON object retrieved from localStorage

本文关键字：JSON 对象 创建 条形图 检索 AmCharts 从从 localStorage 使用      更新时间：2023-09-26

我正在尝试使用AmCharts创建一个条形图，该数组是从localStorage检索的较大JSON对象的一部分。 基本上，我所做的是检索 JSON 字符串，将其解析回 JSON 对象，搜索我正在处理的特定数组（"结果"），在该数组中搜索我正在寻找的结果（通过"id"），然后从该特定结果中获取我需要的数组（"分数"）。 然后，我使用该数组作为 AmChart 代码的输入。

我已经使用另一个示例数组（在代码中定义）测试了 AmChart 代码，它工作正常。 但是，当我尝试从本地存储检索时，我无法显示图表。 有什么想法吗？ 有问题的代码在这里：

//retrieve initial results response from localstorage 
var search_results = localStorage.getItem("results_response"); 
//convert retrieved string back to JSON array 
var search_results_object = JSON.parse(search_results); //search_results_objects is now a JSON array 
var results = search_results_object.results; //pull out results array 
//get venue_id of detail page from local storage 
var ven_id = localStorage.getItem("country_id"); 
//search JSON response for venue ID 
var chartDataResults = []; 
var searchField = "id"; 
var searchVal = ven_id; 
for (var i=0 ; i < results.length ; i++) 
{ 
if (results[i][searchField] == searchVal) { 
    chartDataResults.push(results[i]); 
} 
}  
var chartDataInput = chartDataResults.scores; 
//this all works:
var chartData = chartDataInput; 
var chart = new AmCharts.AmSerialChart(); 
chart.dataProvider = chartData; 
chart.categoryField = "country"; 
chart.rotate = true; 
var graph = new AmCharts.AmGraph(); 
graph.valueField = "score"; 
graph.type = "column"; 
chart.addGraph(graph); 
var categoryAxis = chart.categoryAxis; 
categoryAxis.autoGridCount = false; 
categoryAxis.gridCount = chartData.length; 
categoryAxis.gridPosition = "start"; 
categoryAxis.labelRotation = 90; 
graph.fillAlphas = 0.8; 
chart.write('chartdiv');

最近，Chrome 中的开发控制台告诉我"未捕获的类型错误：无法读取未定义的属性'长度'"。 图表也不会呈现。 思潮？ 我感谢任何和所有的帮助。

由于以下原因，您的代码失败：

var chartDataInput = chartDataResults.scores;

chartDataResults是声明中的数组，而不是对象。根据 amDocs，您可以直接传递chartDataResults，因为它的格式正确，例如 [{title:"sample 1",value:130},{title:"sample 2",value:26}]; .

如果是这样 - 尝试替换：

var chartDataInput = chartDataResults.scores; 
//this all works:
var chartData = chartDataInput;

跟 

var chartData = chartDataResults;

如果 chartDataResults 数组的格式不正确，则需要在该循环中构造它。像这样：

for (var i=0 ; i < results.length ; i++)  { 
  if (results[i][searchField] == searchVal) { 
    var aResult = new Object();
    aResult.title = results[i].title; // or results[i]['title']
    aResult.value = parseInt(results[i].value); // or results[i]['value']
    chartDataResults.push(aResult); 
  } 
}

我推测在您的 json 对象中您有.title和.value.如果没有 - 相应地更换它们。如果您不确定:)它们具有哪些属性 - 将它们打印到控制台并检查它们。

相关文章：