Chart.js图表 上的多个动态垂直线

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循环构建治疗数组。

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

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'
                  }
      });
}