Я не уверен, как заставить Vue JS и графики JS работать вместе.правильно

Question

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

1. В Chart.js в папке компонентов this.options и this.chartData не определены иноль соответственно.

2. Диаграмма по-прежнему рисует chartRender (this.chartData, this.options), но все параметры игнорируются .... и только что обнаружили, что мне даже не нужна (chartRender) эта?странно ... почему мне это не нужно?

, поэтому я мог бы использовать небольшое объяснение и помощь относительно того, почему я могу рисовать вещи, но это не ведет себя какОжидается, и я не понимаю, как графики нарисованы.

https://codesandbox.io/s/vue-template-bq0ol

Answer 1

В вашем примере есть две ошибки, каждая из которых является ошибкой "взлома".

1. Вы передаете не выражение JavaScript, которое оценивается как компонент vm options до <scatter>, а строку со значением 'options'. Чтобы передать свойство vm.options, необходимо добавить к атрибуту двоеточие (:), что является сокращением для v-bind::

<scatter :chart-data="datacollection" :options="options"></scatter>

2. Ваш options неправильно вложен в собственное свойство options. Другими словами,

this.options = {
  options: {
    legend: {
      display: true,
      position: "bottom"
    },
    title: {
      display: true,
      text: "This is the tiitle"
    }
  }
};

должно стать:

this.options = {
  legend: {
    display: true,
    position: "bottom"
  },
  title: {
    display: true,
    text: "This is the tiitle"
  }
};

---

Посмотрите, как это работает здесь .