Question

我已经使用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文件，但是我不知道如何执行此操作-提前非常感谢。

Answer 1

json文件是大多数时间字符串类型，因此您要生成的图表我认为它需要一种数字类型，因此您需要将JSON数据转换为数字时间检查here，如果您正确解析了JSON，请检查here的答案，您会没事的。

Answer 2

这里有几个部分。

第一步：从文件加载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的默认灰色。

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

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

2 个答案:

第一步：从文件加载JSON

第二步：解析JSON响应

第三步：将所有内容整合在一起

扩展想法：