Диаграмма js отношение 1 к n - PullRequest
Новая
       35

Диаграмма js отношение 1 к n

0 голосов
/ 06 августа 2020

Привет, у меня есть диаграмма js вопрос

У меня есть следующая гистограмма 

<canvas id="bar-chart" width="800" height="450"></canvas>

new Chart(document.getElementById("bar-chart"), {
    type: 'bar',
    data: {
      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
      datasets: [
        {
          label: "Population (millions)",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
          data: [2478,5267,734,784,433]
        }
      ]
    },
    options: {
      legend: { display: false },
      title: {
        display: true,
        text: 'Predicted world population (millions) in 2050'
      }
    }
});

И я хочу, чтобы для каждой метки было 3 значения, а не 1, как есть теперь есть идеи, как это сделать?

например, сейчас для Африки у меня есть 2478, но я хочу иметь [2478, 432, 888]

1 Ответ

0 голосов
/ 09 августа 2020

Если я правильно понимаю ваш вопрос, вам придется определить несколько наборов данных, чтобы получить желаемый результат.

Пожалуйста, посмотрите на ваш измененный код ниже, который использует случайные данные. 

new Chart(document.getElementById("bar-chart"), {
  type: 'bar',
  data: {
    labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
    datasets: [{
        label: "Population (millions)",
        data: [2478, 5267, 734, 784, 433],
        backgroundColor: ["rgba(255, 99, 132, 0.6)", "rgba(255, 159, 64, 0.6)", "rgba(255, 205, 86, 0.6)", "rgba(75, 192, 192, 0.6)", "rgba(54, 162, 235, 0.6)"],
        borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)"],
        borderWidth: 1
      },
      {
        label: "Female (millions)",
        data: [1278, 2667, 370, 400, 216],
        backgroundColor: ["rgba(255, 99, 132, 0.4)", "rgba(255, 159, 64, 0.4)", "rgba(255, 205, 86, 0.4)", "rgba(75, 192, 192, 0.4)", "rgba(54, 162, 235, 0.4)"],
        borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)"],
        borderWidth: 1
      },
      {
        label: "Male (millions)",
        data: [1200, 2600, 364, 384, 217],
        backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)"],
        borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)"],
        borderWidth: 1
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'Predicted world population (millions) in 2050'
    },
    tooltips: {
      mode: 'index'
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="bar-chart" width="800" height="450"></canvas>
...