在Chart.js中显示嵌套对象

Question

我正在使用Ionic 3，正在使用一个API，该API作为响应获取带有嵌套对象的json。我需要在chart.js图形栏中显示这些对象的一部分。

我对操作json对象不熟悉。

{
"fruits": [
    {
    "oranges": {
      "good": 1,
      "not_good": 0
    },
    "apples": {
      "good": 1,
      "not_good": 0
    },
    "grapes": {
      "good": 2,
      "not_good": 0
    }
  }]
 }

我不知道响应中会有多少水果。

水果的名称将是标签，“好”和“不好”将是数据集。

Answer 1

let goods = []; 
let bads = [];
let labels = [];
for (let i = 0; i < obj.fruits.length; i++) {
    const fruit = obj.fruits[i];
    // Since we don't know the fruit name, we iterate through its keys
    for (var key in fruit) {
        // Push the fruit name
        labels.push(key);
        let val = fruit[key];
        if(val.good == 1) {
            // If good is 1, push the fruit name to goods array
            goods.push(val);
        } else {
            // If not_good is 1, push to bads array
            bads.push(val);
        }
    }
}

Answer 2

可以使用chart.js绘制这种条形图。

var ctx = document.getElementById("myChart").getContext("2d");

var data = {
  labels: ["Good", "Not good"],
  datasets: [{
    label: "Oranges",
    backgroundColor: "orange",
    data: [2, 1]
  }, {
    label: "Apples",
    backgroundColor: "green",
    data: [4, 2]
  }, {
    label: "Grapes",
    backgroundColor: "purple",
    data: [3, 1]
  }]
};

var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    barValueSpacing: 20,
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

但是，您的api提供的数据并不理想。因此，您必须像这样从响应中处理数据。

const res = {
  fruits: [
    {
      oranges: {
        good: 1,
        not_good: 0
      },
      apples: {
        good: 1,
        not_good: 0
      },
      grapes: {
        good: 2,
        not_good: 0
      }
    }
  ]
};
const dataset = Object.entries(res.fruits[0]).map(fruit => {
  return {
    label: fruit[0],
    data: Object.values(fruit[1])
  };
});

console.log(dataset);

鉴于每个栏的backgroundColor都不包含在api数据中，因此您还必须弄清楚从何处获取该数据。

这里是所有东西在一起的样子。

const res = {
  fruits: [
    {
      oranges: {
        good: 10,
        not_good: 5
      },
      apples: {
        good: 6,
        not_good: 1
      },
      grapes: {
        good: 9,
        not_good: 5
      },
      pears: {
        good: 15,
        not_good: 6
      }
    }
  ]
};

const datasets = Object.entries(res.fruits[0]).map(fruit => {
  return {
    label: fruit[0], 
    data: Object.values(fruit[1]),
    backgroundColor: getRandomColor()
  };
});


const ctx = document.getElementById("myChart").getContext("2d");

const data = {
  labels: ["Good", "Not good"],
  datasets
};

const myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    barValueSpacing: 20,
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
        }
      }]
    }
  }
});

function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

JSfiddle

getRandomColor from this answer

Answer 3

您可以尝试将您的对象转换为水果对象的数组：

const input = {
"fruits": [
    {
    "oranges": {
      "good": 1,
      "not_good": 0
    },
    "apples": {
      "good": 1,
      "not_good": 0
    },
    "grapes": {
      "good": 2,
      "not_good": 0
    }
  }]
  };

const output = Object.keys(input.fruits[0])
.map(fruit => new Object({'name' : fruit, 'dataset' : input.fruits[0][fruit] })  ); 

console.log(output);