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

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();

我想根据“STATUS”的值绘制一些点前任:状态 = 通过蓝色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();

在这里，我将通过编码为 80，将失败编码为 100(假设只有这两种状态)。然后我将气泡大小(z 轴)从最小值 0 固定到最大值 100。这意味着 100 是完整大小的气泡，0 是最小的气泡，所以你可以玩状态分数中的分数来让你冒泡所需的大小。