Графики Angular nvd3 — Разброс и Линия на одном графике

Я хочу создать диаграмму с точками и линиями, как на изображении ниже.

введите здесь описание изображения

Я попробовал мультидиаграмму с типом: «линия» + «гистограмма», и, похоже, это работает. Но когда я указываю «разброс» + «линия», данные о разбросе не отображаются.

Можно ли это сделать с Angular nvd3?

Большое спасибо за твою помощь.

Вот мой код плунжера:

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
    }
];
});

person user494491    schedule 26.10.2015    source источник


Ответы (1)


ваш код правильный, возможно, версия, которую вы использовали, Angular-nvd3 неверна, вот рабочий plunker< /а>

person Mohamed NAOUALI    schedule 19.08.2016