图表上的图表上的多个动态垂直线

Question

我试图在单个图表上创建多个垂直线，这些垂直线代表处理日期。每行都是具有不同的值（日期）和可能不同的颜色（取决于治疗类型），我有多个行，但是这些线像以下那样硬编码：

：

var Line = "25/03/2018";
var Line2 = "13/07/2018";
var treatments = [{
        type: 'line',
                  mode: 'vertical',
                  scaleID: 'x-axis-0',
                  value: Line,
                  borderColor: '#007e24',
                  borderWidth: 4,
                  label: {
                    enabled: true,
                    content: '13/07/2018'
                  }
      },
      {
        type: 'line',
                  mode: 'vertical',
                  scaleID: 'x-axis-0',
                  value: Line2,
                  borderColor: '#000',
                  borderWidth: 4,
                  label: {
                    enabled: true,
                    content: '13/07/2018'
                  }
      }
    ];

由于数据将来自CSV，是否可以添加下面的内容并创建等于数组中项目数量并相应地更改值和颜色的处理数量？因此，使用下面的我最终会有3行，其中包含阵列中的值和颜色？

var dates = ["01/03/2018", "01/05/2018", "09/10/2018"];
var colours= ["#000", "#000", "#fff"];
    var treatments = [{
            type: 'line',
                      mode: 'vertical',
                      scaleID: 'x-axis-0',
                      value: DYNAMIC VALUE,
                      borderColor: 'DYNAMIC VALUE',
                      borderWidth: 4,
                      label: {
                        enabled: true,
                        content: '13/07/2018'
                      }
          }
        ];

，或者如果还有其他解决方法可以创建这个？

谢谢！希望这是有道理的！： - ）

Answer 1

如果我理解正确的话，您可以循环循环日期数组，并使用for loop构建处理阵列。

我没有运行它，但是下面至少应该指向正确的方向 - 它假设颜色数量与日期相同。

var dates = ["01/03/2018", "01/05/2018", "09/10/2018"];
var colours = ["#000", "#000", "#fff"];
var treatments = [];
var i;
for (i = 0; i < dates.length; i++) {
    treatments.push({
                  type: 'line',
                  mode: 'vertical',
                  scaleID: 'x-axis-0',
                  value: dates[i],
                  borderColor: colours[i],
                  borderWidth: 4,
                  label: {
                    enabled: true,
                    content: '13/07/2018'
                  }
      });
}