如何自定义plotly.js的parcats平行类别图的hover悬停高亮效果

解决方法 #

plotly.js的parcats组件默认没有提供单段路径高亮的原生配置，你可以通过监听图表的hover事件，手动修改DOM元素样式实现需求，具体步骤如下：

• 第一步：关闭默认的全路径高亮效果，将trace的hoveron属性设置为'none'
• 第二步：绑定plotly_hover自定义悬停逻辑，识别当前悬停路径所属的维度区间，仅高亮对应区间的路径段
• 第三步：绑定plotly_unhover事件，悬停结束后恢复所有路径的默认样式

下面是完整的可运行代码：

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="myDiv"></div>
  <script>
    var trace1 = {
      type: 'parcats',
      hoveron: 'none', // 关闭默认高亮
      dimensions: [
        {
          label: 'Quiz 1',
          values: ['Black', 'Black', 'Black', 'Brown', 'Brown', 'Brown', 'Red', 'Brown'],
        },
        {
          label: 'Quiz 2',
          values: ['Brown', 'Brown', 'Brown', 'Brown', 'Brown', 'Blue', 'Blue', 'Blue'],
        },
        {
          label: 'Quiz 3',
          values: ['Female', 'Female', 'Female', 'Male', 'Female', 'Male', 'Male', 'Male'],
        },
      ],
    };
    var data = [ trace1 ];
    var layout = {width: 600};

    Plotly.newPlot('myDiv', data, layout).then(() => {
      const gd = document.getElementById('myDiv');
      // 监听悬停事件
      gd.on('plotly_hover', (eventData) => {
        // 所有路径元素统一降低透明度
        document.querySelectorAll('.parcats .path').forEach(path => {
          path.style.opacity = 0.2;
        });
        // 取当前悬停的路径索引
        const hoveredPoint = eventData.points[0];
        const hoveredPaths = document.querySelectorAll(`.parcats .path[data-index="${hoveredPoint.pointNumber}"]`);
        // 仅高亮当前路径在悬停维度区间的段
        const dimIndex = hoveredPoint.dimension;
        if (dimIndex < trace1.dimensions.length - 1) {
          hoveredPaths[dimIndex].style.opacity = 1;
        }
      });
      // 监听离开事件恢复样式
      gd.on('plotly_unhover', () => {
        document.querySelectorAll('.parcats .path').forEach(path => {
          path.style.opacity = 1;
        });
      });
    });
  </script>
</body>

注意事项 #

• 该实现依赖plotly.js渲染parcats时给路径元素添加的data-index和维度顺序属性，若后续plotly.js版本修改了DOM结构需要同步调整选择器逻辑
• 你可以根据需求修改高亮的样式，比如改变描边颜色、增加粗细等，直接修改路径元素的style属性即可

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