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

Question

我用C创建了一个简单的饼图hart.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数据转换为数字时间检查，如果您正确解析json，请在此处检查其已回答的内容，您就可以了。

Answer 2

这里有几个部分。

我喜欢用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);
    });

请注意，如果您在本地运行此代码，如果您试图直接从文件系统访问网站（如文件：///

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

python -m SimpleHTTPServer 8000

或

php -S localhost:8000

这将提供端口8000上的当前目录。然后参观http://localhost:8000/

另外，确保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的默认灰色。

可以进一步抽象图形代码以支持多个数据集