Диаграмма.js in Vue определение нескольких наборов данных

Диаграмма.js in Vue определение нескольких наборов данных

04.01.2020 04:12:05 Просмотров 33 Источник

Я использую библиотеку chartkick, чтобы обернуть диаграмму.JS в вуе. Я пытался реализовать несколько наборов данных в одной диаграмме с помощью следующего кода:

<template>
  <area-chart width="900px" :data="chartData" :colors="['#cc0088', '#f59b42']" ></area-chart>
</template>
<script>
  chartData: [{
        label:"Line-1",
        data: [12.5, 3.1, 2.3, 1.2, 8.5],
    }, {
        label:"Line-2",
        data: [12.5, 4.1, 3.3, 4.2, 15.5],
    }],
</script>

И вот как это выглядит: enter image description here

И я нашел пример, как это делается в plain JS:

var data = {
    labels: ["-2h", "-10m", "-7m", "-2m", "-5s"],
    datasets: [{
            label:"Line-1",
        data: [12.5, 3.1, 2.3, 1.2, 8.5],
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(200,10,10,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
    }, {
            label:"Line-2",
        data: [12.5, 4.1, 3.3, 4.2, 15.5],
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
    },

    ]
};

Вот полный код к этому примеру. Как правильно его завернуть?

У вопроса есть решение - Посмотреть?

Ответы - Диаграмма.js in Vue определение нескольких наборов данных / Chart.js in Vue defining multiple datasets

Является ответом!
auenal

06.01.2020 04:34:33

Я нашел решение, если кто-то сталкивается с той же проблемой:

<template>
  <div>
    <area-chart :data="tableData"></area-chart>
  </div>
</template>

 data() {
      return {
        tableData: [
          {name: 'Usage', data: {'2017-01-01': 3, '2017-01-02': 4}},
          {name: 'Revenue', data: {'2017-01-01': 5, '2017-01-02': 3}}
        ]
      }
 }
Закрыть X