使用 Chart.js 在图表上显示多条动态垂直线

马克·阿什当

我正在尝试在单个图表上创建多条垂直线，这些线代表治疗日期。每行都有不同的值（日期）和可能不同的颜色（取决于治疗类型）目前我有多行，但这些是硬编码的，如下所示：

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

        ];

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

谢谢！希望这是有道理的！:-)

格雷格

如果我理解正确，您可以遍历日期数组并使用 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'
                  }
      });
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。