Javascript将int添加到var名称中

Javascript add int to var name

本文关键字：var int 添加 Javascript      更新时间：2023-09-26

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

为什么不做一些类似的事情：

var colors = ['red','green','blue'];
...
strokeColor : colors[j]
相关文章：