Javascript将int添加到var name

时间:2016-03-24 21:33:37

标签: javascript jquery charts

我想通过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的新手......)。

1 个答案:

答案 0 :(得分:0)

为什么不做以下事情:

$flush