时间戳

首页 > 解决方案 > 我们可以更改选定点的样式吗？

javascript - 我们可以更改选定点的样式吗？

问题描述

在这个 plotly.js 生成的箱线图中，选择点后，未选择的点的不透明度为 0.2。

是否可以更改选定点和非选定点的样式？

var trace1 = {
  y: [0, 1, 2, 3, 4, 5, 6],
  type: 'box',
  selectedpoints : [1,2,5],
  boxpoints: 'all'
};

var data = [trace1];

var layout = {};

Plotly.newPlot('myDiv', data, layout);
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv"></div>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
</body>

标签： javascriptplotly

解决方案

如果您查看参考，您会看到“已选择”和“未选择”标记的属性允许您更改它们的样式：

var trace1 = {
  y: [0, 1, 2, 3, 4, 5, 6],
  type: 'box',
  selectedpoints: [1, 2, 5],
  boxpoints: 'all',
  selected: {
    marker: {
      color: '#ff0000',
      opacity: 0.8
    }
  },
  unselected: {
    marker: {
      color: '#00ff00',
      opacity: 0.5
    }
  }
};

var data = [trace1];

var layout = {};

Plotly.newPlot('myDiv', data, layout);
<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <!-- Plotly chart will be drawn inside this DIV -->
  <div id="myDiv"></div>
  <script>
    /* JAVASCRIPT CODE GOES HERE */
  </script>
</body>

推荐阅读