使用 Chart.js 从外部 JSON 文件解析值答案

【问题标题】：Parsing values from external JSON file with Chart.js使用 Chart.js 从外部 JSON 文件解析值
【发布时间】：2018-07-15 12:55:04
【问题描述】：

我使用 Chart.js 创建了一个简单的饼图。我想将此链接到我计算机上的 JSON 文件，该文件位于同一本地文件夹中。然后，我希望 JSON 文件中的数据显示在我的饼图中，而不是直接从脚本中获取。

我该怎么做呢？这是我的代码。

  <script>
    var ctx = document.getElementById("myDoughnutChart");
    var myDoughnutChart = new Chart(ctx, {
        type: 'doughnut',
            data: {
                labels: ["Blue", "Red", "Green", "Orange", "Light Blue"],
            datasets: [{
                backgroundColor: ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF"],
                    data: [12, 19, 3, 5, 2],
                    }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                showAllTooltips: true,
                title: {
                    display: true,
                    text: "Responsive test"
                    },
                legend: {
                    display: false,
                    fullWidth: true,
                    labels: {
                    boxWidth: [50]
                    },
                }
            }
        });
    </script>

这是我的 JSON 文件，保存在“chart.json”下 - 我不确定这是否是正确的格式，因为我是一个真正的新手。

{"jsonarray": [{
    "Color": "Blue",
    "Value": 12}, 
    {
    "Color": "Red",
    "Value": 19}, 
    {
    "Color": "Green",
    "Value": 3}, 
    {
    "Color": "Orange",
    "Value": 5}, 
    {
    "Color": "Light Blue",
    "Value": 2}]
};

我知道需要解析 JSON 文件，但我不知道该怎么做 - 非常感谢您提前。

【问题讨论】：

标签： javascript json chart.js

【解决方案1】：

这里有几个部分。

第一步：从文件中加载 JSON

我喜欢使用Fetch。如果你使用 jQuery，你也可以使用$.ajax。假设该文件与您的 JS 代码位于同一目录中，并命名为 chart.json：

  fetch('./chart.json')
    .then(function (response) {
      return response.json();
    }).then(function (json) {
      // drawChart fn to be created...see below
      drawChart(json);
    }).catch(function (error) {
      console.error(error);
    });

请注意，如果您在本地运行此代码，如果您尝试直接从文件系统访问该网站（如 file:///<path-to-file>/index.html），则可能会收到有关 CORS 的错误。

相反，您可以轻松运行本地服务器。在终端中转到包含您的文件的目录，然后运行：

python -m SimpleHTTPServer 8000

或

php -S localhost:8000

这会提供端口 8000 上的当前目录。然后访问 http://localhost:8000/

另外，请确保 JSON 有效（末尾没有分号！）。

第二步：解析 JSON 响应

我们正在尝试制作两个数组。一个带有数字的数据，一个带有字符串的标签。

您可以使用map 轻松做到这一点：

var graphData = json.jsonarray.map(e => e.Color);
// ["Blue", "Red", "Green", "Orange", "Light Blue"]
var graphLabels = json.jsonarray.map(e => e.Value);
// [12, 19, 3, 5, 2]

第三步：整合所有内容

window.addEventListener("DOMContentLoaded", draw);
function draw() {
  // Get the json file with fetch or $.ajax
  // Pass the json data to drawChart
}
function drawChart(jsonData) {
  /* get graphData and graphLabels
  draw chart with your existing code
  pass graphData and graphLabels in place of
  the hard-coded labels and data in your Chart initialization */
}

扩展思路：

目前此代码仅支持单个数据集。 backgroundColor 数组是固定的，所以如果你没有正好 5 个值，一些背景颜色将是 ChartJS 的默认灰色。

您可以进一步抽象绘图代码以支持多个数据集，甚至可以根据需要随机生成颜色以匹配组数。只需根据需要将硬编码值替换为您从数据集中生成的变量即可。希望这可以帮助您入门！

【讨论】：

非常感谢您抽出宝贵时间来解决这个问题。我现在唯一的问题是我在代码中的什么地方输入变量 graphData 和 graphLabels？我完全是新手，对 JS 的了解很少，再次感谢
您可以将当前代码包装在一个接受这些变量的函数中，例如 function drawGraph(graphData, graphLabels) { // 您现有的代码 }。然后在你现有的代码中，用传入的变量替换硬编码的值。所以 data: { labels: ["Blue", "Red", "Green", "Orange", "Light Blue"] 变成 data: {标签：graphLabels 和数据的相同替换。

【解决方案2】：

json 文件大部分时间都是字符串类型，所以你要生成的图表我认为它需要一种数字类型，所以你需要将你的 JSON 数据转换为数字时间检查here，如果你正确解析JSON，检查here它是如何回答的，你会没事的。

【讨论】：