Question

我有一个双轴图表（x，y），我绘制了所有点

  var x = myChart.addAxis("x","Id");
  x.addOrderRule("Id");
  var y = myChart.addMeasureAxis("y", "VALUE");
  y.tickFormat = ",";
  myChart.addSeries(null, dimple.plot.line);
  var z = myChart.addSeries(["Version","Id","STATUS"], dimple.plot.line);
  myChart.addLegend(60, 10, 500, 20, "left", z);
  myChart.draw();
  x.shapes.selectAll("text").remove();

我想根据“状态”的值绘制一些点例如：状态=通过蓝色 STAUTS =失败红色

有人可以帮我吗

由于

Answer 1

通过代码的外观，系列z已经被STATUS着色，这意味着你需要做的就是分配一些特定的颜色：

var z = myChart.addSeries(["Version","Id","STATUS"], dimple.plot.line);
myChart.assignColor("PASS", "blue");
myChart.assignColor("FAIL", "red");
myChart.addLegend(60, 10, 500, 20, "left", z);
myChart.draw();

虽然你可能想要指定一些稍微好一点的红色和蓝色。

还有更多选项，您可以在此处查看有关assignColour的更多详细信息：

https://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-assignColor

要根据您需要将其编码为数字的类别对点进行大小调整，并将它们绘制为z轴上的气泡，您可以执行以下操作。气泡系列将与折线图的点对齐，使它们看起来像尺寸标记。

data.forEach(function (d) {
   d["Status Score"] = (d.STATUS === "PASS" ? 80 : 100);
}, this);
var myChart = new dimple.chart(svg, data);
var x = myChart.addAxis("x","Id");
x.addOrderRule("Id");
var y = myChart.addMeasureAxis("y", "VALUE");
y.tickFormat = ",";
var z = myChart.addMeasureAxis("z", "Status Score");
z.overrideMin = 0;
z.overrideMax = 100;
myChart.addSeries(null, dimple.plot.line);
myChart.addSeries(["Version","Id","STATUS"], dimple.plot.line);
myChart.addSeries(["Version","Id","STATUS"], dimple.plot.bubble);
myChart.addLegend(60, 10, 500, 20, "left", z);
myChart.draw();

这里我将Pass编码为80，将失败编码为100（假设这些是唯一的2种状态）。然后我将气泡大小（z轴）从最小0修正到最大100.这意味着100是全尺寸气泡，0是最小气泡，所以你可以使用状态分数中的分数来让你泡泡所需的大小。

如何根据值修改图表上的点的大小和颜色？ dimple.js

1 个答案: