Kątowe wykresy nvd3 - Rozproszenie i linia na tym samym wykresie - wykresy, linia, rozproszenie, kątowe-nvd3

Chcę utworzyć wykres z punktami i liniami, jak na obrazku poniżej.

Próbowałem multichart z typem: „line” + „barchart” i wydaje się, że działa. Ale kiedy określę „scatter” + „line”, nie pojawią się żadne dane rozproszone.

Czy można to zrobić za pomocą Angular nvd3?

Bardzo dziękuję za Twoją pomoc.

Oto mój kod plunker:

var app = angular.module("plunker", ["nvd3"]);

app.controller("MainCtrl", function($scope) {
$scope.options = {
chart: {
type: "multiChart",
height: 450,
margin : {
top: 30,
right: 60,
bottom: 50,
left: 70
},
color: d3.scale.category10().range(),
//useInteractiveGuideline: true,
transitionDuration: 500,
xAxis: {
tickFormat: function(d){
return d3.format(",f")(d);
}
},
yAxis: {
tickFormat: function(d){
return d3.format(".02f")(d);
}
}
}
};

$scope.data = [
{
key: "X",
type: "scatter",
values: [
{ x: 1, y: 125, size: Math.random(), shape: "circle" },
{ x: 2, y: 125, size: Math.random(), shape: "circle" },
{ x: 3, y: 140, size: Math.random(), shape: "circle" }
],
yAxis: 1
},
{
key: "Y",
type: "bar",
values: [
{x:1, y:109, label:"C2.1"},
{x:2, y:102, label:"C2.2"},
{x:3, y:105, label:"C2.3"}
],
yAxis: 1
},
{
key: "Z",
type: "line",
values: [
{ x: 1, y: 115 },
{ x: 2, y: 120 },
{ x: 3, y: 130 }
],
yAxis: 1
}
];
});

Odpowiedzi:

Twój kod jest poprawny, może to być wersja, z której korzystałeś Angular-nvd3 si niepoprawne tutaj działa plunker