Question

我想通过vue为图表添加一些数据到我的javascript。我的问题是，不知道将会有多少图表（这取决于数据）

这是我的Graph.js文件。

import Chart from 'chart.js';
export default 
{
  template: '<canvas width="200" height="210" id="graph"></canvas>',
  props: ['amount', 'values0', 'color0', 'values1', 'color1', 'values2', 'color2'],
  ready() 
  {
    var datasetValue = [];
    for (var j = 0; j < this.amount; j++) 
    {    
      datasetValue[j] = 
      {
        fillColor: "rgba(0, 0, 0 , 0)",
        pointColor: "rgba(0, 0, 0, 0)",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220, 220, 220, 1)",
        strokeColor : this.color+j,
        data: this.values+j,
      };
    }
    var data = 
    {
      labels: ['1s', '2s', '3s', '4s', '5s'],
      datasets : datasetValue
    };
    var context = document.querySelector('#graph').getContext('2d');
    new Chart(context).Line(data);
  }
}

这是我的app.js文件：

import Vue from 'vue';
import Graph from './components/Graph';
new Vue({
  el: 'body',
  components: { Graph }
});

这里是我的HTML

<graph
    amount="3"
    :values0="[3000, 3500, 4000, 6000, 1000]"
    color0="rgba(196, 30, 59, 0.7)"
    :values1="[4000, 2500, 5000, 3000, 2000]"
    color1="rgba(255, 125, 10, 0.7)"
    :values2="[5000, 6000, 1000, 5000, 6000]"
    color2="rgba(171, 212, 115, 0.7)"
    >
</graph>

在片刻，一切都是硬编码的，仅用于测试目的。如您所见，我使用for循环将多个图形添加到图表中。我的问题是，我不知道如何告诉Javascript必须将+ j直接添加到this.color而不是其中的值，因为我需要来自html文件的值（直接输出数据库）并且我不知道另一种有效的方法来解析它们到javascript。

（我知道我的代码有点迟钝，我是Javascript的新手......）。

Answer 1

为什么不做以下事情：

$flush

Javascript将int添加到var name

1 个答案: