使用 plotly js 在散点图上进行基于条件的着色

Question

我将 x 轴作为某个范围，例如：-100、-50、-12、-6、0、6、12、50、100，y 轴是标签，例如：不同的巧克力品牌 kitkat、5star , milkybar, e.t.c 或者反之 X 和 y 轴

我想要每个品牌的散点图和条件着色（每个品牌的着色条件不同）例如：对于 kitkat 品牌，如果值在小于或等于 -6 和 +6 黄色散点图的范围内，如果大于 6 绿色，如果小于 -6 它应该是红色。 5 星 - 如果值在小于或等于 -12 和 +12 的范围内黄色散点，如果大于 12 绿色，如果小于 -12 则应该是红色。

我是 plotly js 的新手。我在所有示例中都找到了 x、y 值，但无法在 y 轴上找到类似的品牌，在 x 轴上找不到类似的值。

我希望每个品牌在该水平线上都有各自的散点，只是现在无法显示。

这是我的数据，

[{"kitkat":[1, -9, 60, 5, 19],
"5star":[20,-78,12,18,90],
"milkybar":[-67,20,-8,90,12]}]

我尝试了此代码，但无法为每个品牌提供每个数据，甚至无法提供条件着色

这个首字母：

data = [];
data.push({
  'id': "KitKat",
  'value': 12,
  'condition': 'CM'
});
data.push({
  'id': "KitKat",
  'value': 4,
  'condition': 'ECM'
});
data.push({
  'id': "KitKat",
  'value': -23,
  'condition': 'SAX'
});
data.push({
  'id': "5Start",
  'value': 4,
  'condition': 'SAX'
});
data.push({
  'id': "5Start",
  'value': 78,
  'condition': 'ECM'
});
data.push({
  'id': "5Start",
  'value': 78,
  'condition': 'CM'
});
data.push({
  'id': "ABC",
  'condition': 'CM'
});
data.push({
  'id': "DEF",
  'condition': 'CM'
});
data.push({
  'id': "XYZ",
  'condition': 'CM'
});


var conditions = new Set(data.map(a => a.condition));
traces = [];
conditions.forEach(function(condition) {
  var newArray = data.filter(function(el) {
    return el.condition == condition;
  });
  traces.push({
    x: newArray.map(a => a.id),
    y: newArray.map(a => a.value),
    name: condition,
    mode: 'markers',
    type: 'scatter'
  })
})
Plotly.plot('myPlot', traces);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myPlot"></div>

任何人都可以建议如何实现我的输出

Answer 1

trace.marker.color 接受一个数组，您可以使用它为每个数据点赋予单独的颜色。

const data = [
  {
    "id": "kitkat",
    "value": 12,
    "condition": "CM"
  },
  {
    "id": "kitkat",
    "value": 4,
    "condition": "ECM"
  },
  {
    "id": "kitkat",
    "value": -23,
    "condition": "SAX"
  },
  {
    "id": "milkyway",
    "value": 12,
    "condition": "CM"
  },
  {
    "id": "milkyway",
    "value": 4,
    "condition": "ECM"
  },
  {
    "id": "milkyway",
    "value": -23,
    "condition": "SAX"
  }
];

const conditions = ["CM", "ECM", "SAX"];

function getColor(data) {
  // enter your conditional coloring code here
  if (data.id === 'kitkat' && data.value > 0) {
    return '#0000FF'
  }
  return '#FF0000';
}

const traces = conditions.map(condition => {
  const filteredData = data.filter(d => d.condition === condition);
  return {
    x: filteredData.map(d => d.id),
    y: filteredData.map(d => d.value),
    name: condition,
    mode: 'markers',
    type: 'scatter',
    marker: {
      color: filteredData.map(d => getColor(d))
    }
  };
});

Plotly.plot('myPlot', traces, {showlegend: false});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myPlot"></div>

使用 plotly js 在散点图上进行基于条件的着色

Condition based coloring on scatter plot using plotly js

javascript

css

plotly

plotly.js