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

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

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

1 个答案: