Как обновить свойства диаграммы с помощью экземпляра диаграммы в vuejs + chartjs?

Question

Как обновить свойства диаграммы с помощью экземпляра диаграммы в vuejs + chartjs?

Я предлагаю простую рекурсивную функцию -генератора следующим образом:

// Generate cartesian product of given iterables:
function* cartesian(head, ...tail) {
  let remainder = tail.length ? cartesian(...tail) : [[]];
  for (let r of remainder) for (let h of head) yield [h, ...r];
}

// Example:
const first  = ['a', 'b', 'c', 'd'];
const second = ['e'];
const third  = ['f', 'g', 'h', 'i', 'j'];

console.log(...cartesian(first, second, third));

0

javascript vue.js charts vuejs2

задан ex080 13 July 2018 в 04:33

1 ответ

Другие вопросы по тегам:

javascript vue.js charts vuejs2

Похожие вопросы:

score 1 · Accepted Answer

Вы должны сохранить ссылку на экземпляр вашей диаграммы, а именно в свой метод createChart.

Полный рабочий пример в CodeSandbox .

 <template>
  <div>
      <h2>Fun Graph</h2>
      <canvas id="planet-chart"></canvas>
  </div>
</template>
<script>
import Chart from "chart.js";
import planetChartData from "./chart-data.js";

export default {
  name: "test",
  data() {
    return {
      text: "",
      planetChartData: planetChartData,
      myChart: null,
    };
  },
  mounted() {
    this.createChart("planet-chart", this.planetChartData);
  },
  methods: {
    createChart(chartId, chartData) {
      const ctx = document.getElementById(chartId);
      // Save reference
      this.myChart = new Chart(ctx, {
        type: chartData.type,
        data: chartData.data,
        options: chartData.options
      });
    },
    addData(label, data) {
    // Use reference
      this.myChart.data.labels.push(label);
      this.myChart.data.datasets.forEach(dataset => {
        dataset.data.push(data);
      });
    }
  }
};
</script>

Это сработало !!! Будет ли способ сделать его динамичным. Например, если я снова использовал метод createChart() для создания другой диаграммы, моя первоначальная ссылка на график 1 была бы переопределена, правильно? — ex080, 13 July 2018 в 05:17
Да, абсолютно. Я бы создал объект key / value, чтобы удерживать ссылку на каждый новый график, например myChart, причем ключ является идентификатором и значением, являющимся фактическим экземпляром. Тогда возможно использование массива для создания новых холстов. Здесь проверьте этот пример на CodeSandbox . — Steven B., 13 July 2018 в 05:50