如何修改Vue项目中vis.js时间轴条目颜色并配置随机显示色

你可以通过两种方式实现条目栏随机配色，替换当前固定绿色的效果：

方案一：直接生成随机色内联样式（无需额外CSS） #

这种方式不需要提前写样式类，直接在生成条目时给每个item随机分配颜色即可，灵活度最高。
vis.js 的box类型条目原生支持style属性，可以直接传入内联样式覆盖默认外观，不需要额外操作DOM。
修改后的created钩子代码如下：

created() {
  var now = moment().minutes(0).seconds(0).milliseconds(0);
  var groupCount = 3;
  var itemCount = 20;
  var names = ['John', 'Alston', 'Lee', 'Grant'];
  
  // 随机生成十六进制颜色
  const getRandomHexColor = () => {
    return '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
  }

  // 生成分组
  for (var g = 0; g < groupCount; g++) {
    this.groups.push({
      id: g,
      content: names[g]
    });
  }
  // 生成时间轴条目
  for (var i = 0; i < itemCount; i++) {
    var start = now.clone().add(Math.random() * 200, 'hours');
    var group = Math.floor(Math.random() * groupCount);
    const randomColor = getRandomHexColor();
    this.items.push({
      id: i,
      group: group,
      content: `item ${i} <span style="color:${randomColor}">(${names[group]})</span>`,
      start: start,
      type: 'box',
      // 直接给条目设置样式，覆盖默认绿色
      style: `background-color: ${randomColor}; border-color: ${randomColor}; color: #fff;`,
      title: 'Testing tool tip index' + i     
    });
  }
},

方案二：预设CSS类随机分配（配色更可控） #

如果不想要完全随机的颜色，避免出现亮度过低、文字对比度不足的难看颜色，可以提前定义好一组符合设计规范的颜色类，生成条目时随机选择类名即可。

1. 首先添加自定义CSS样式：

如果使用Vue单文件组件的scoped样式，需要用:deep()深度选择器包裹自定义样式，否则无法命中vis.js渲染的DOM节点。

/* 非scoped样式可以直接写 */
.vis-item.color-red {
  background-color: #ff4d4f;
  border-color: #cf1322;
  color: #fff;
}
.vis-item.color-blue {
  background-color: #1890ff;
  border-color: #096dd9;
  color: #fff;
}
.vis-item.color-orange {
  background-color: #fa8c16;
  border-color: #d46b08;
  color: #fff;
}
.vis-item.color-purple {
  background-color: #722ed1;
  border-color: #531dab;
  color: #fff;
}
.vis-item.color-green {
  background-color: #52c41a;
  border-color: #389e0d;
  color: #fff;
}

/* scoped样式需要加深度选择器，示例：
:deep(.vis-item.color-red) {
  样式规则同上
}
*/

2. 修改生成条目的逻辑，随机选择预设类名：

created() {
  var now = moment().minutes(0).seconds(0).milliseconds(0);
  var groupCount = 3;
  var itemCount = 20;
  var names = ['John', 'Alston', 'Lee', 'Grant'];
  // 预设可选的颜色类名
  const colorClassList = ['color-red', 'color-blue', 'color-orange', 'color-purple', 'color-green'];
  // 颜色和类名对应，方便给文字赋值同色
  const colorMap = {
    'color-red': '#ff4d4f',
    'color-blue': '#1890ff',
    'color-orange': '#fa8c16',
    'color-purple': '#722ed1',
    'color-green': '#52c41a'
  }

  // 生成分组逻辑不变
  for (var g = 0; g < groupCount; g++) {
    this.groups.push({ id: g, content: names[g] });
  }
  // 生成条目
  for (var i = 0; i < itemCount; i++) {
    var start = now.clone().add(Math.random() * 200, 'hours');
    var group = Math.floor(Math.random() * groupCount);
    // 随机选一个颜色类
    const randomClass = colorClassList[Math.floor(Math.random() * colorClassList.length)];
    const currentColor = colorMap[randomClass];
    this.items.push({
      id: i,
      group: group,
      content: `item ${i} <span style="color:${currentColor}">(${names[group]})</span>`,
      start: start,
      type: 'box',
      className: randomClass,
      title: 'Testing tool tip index' + i     
    });
  }
},

扩展提示 #

如果需要同一个分组下的所有条目显示同一种颜色，只需要在生成分组的时候给每个group分配固定颜色，生成item时直接取对应group的颜色赋值即可，不需要每次随机。

内容的提问来源于stack exchange，提问作者Arctic Fox