我不确定如何让 vue js 和图表 js 一起工作。正确地

Question

我将以下解决方案作为测试拼凑在一起，但以下解决方案让我无法理解。

1. 在组件文件夹中的 Chart.js 中，this.options 和 this.chartData 分别为未定义和 null。

   1. 图表仍然绘制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>

1. 您的 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"
  }
};

---

看到它工作here。