Как изменить размер и цвет очков на диаграмме в зависимости от значения? dimple.js

Question

У меня есть две осей диаграмма а (х, у), я вычерчиваю все точки

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» Ex: STATUS = PASS СИНИЙ STAUTS = FAIL RED

Может кто-нибудь мне помочь, пожалуйста

Благодарности

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

Для точек размера на основе категории вы должны закодировать их числа и построить их в виде пузырьков на оси г , которую вы можете сделать следующим образом. Серия пузырей будет соответствовать точкам линейной диаграммы, чтобы они выглядели как маркеры размера.

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 и Fail как 100 (при условии, что это только 2 состояния). Затем я фиксирую размер пузыря (ось z) от минимального 0 до максимального 100. Это означает, что 100 - это пузырь полного размера, а 0 - самый маленький пузырь, поэтому вы можете играть с оценками в баллах состояния, чтобы сделать вас пузырьками желаемый размер.