Angular NvD3 Multichart 不工作

Question

我想使用 Angularjs NvD3. I have to create Line graph but unable to showing Multibar chart, i think i make some mistake. Here is 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,
            duration: 500,
            xAxis: {
                tickFormat: function(d){
                    return d3.format(',f')(d);
                }
            },
            yAxis1: {
                tickFormat: function(d){
                    return d3.format(',.1f')(d);
                }
            },
            yAxis2: {
                tickFormat: function(d){
                    return d3.format(',.1f')(d);
                }
            }
        }
    };


    /***********Line*********/
    $scope.data = [];
    $scope.data[0]={};
    $scope.data[0].key='Stream';
    $scope.data[0].yAxis=1;
    $scope.data[0].type='line';
    $scope.data[0].values=[];
     $scope.data[0].values[0]={};
    $scope.data[0].values[0].x=0;
    $scope.data[0].values[0].y=4;
     $scope.data[0].values[1]={};
    $scope.data[0].values[1].x=1;
    $scope.data[0].values[1].y=8;


  $scope.data[1]={};
    $scope.data[1].key='Stream2';
    $scope.data[1].yAxis=1;
    $scope.data[1].type='line';
    $scope.data[1].values=[];
     $scope.data[1].values[0]={};
    $scope.data[1].values[0].x=0;
    $scope.data[1].values[0].y=4;
     $scope.data[1].values[1]={};
    $scope.data[1].values[1].x=1;
    $scope.data[1].values[1].y=8;
    /*******************************/
    /********MultiBar Chart**********/
     $scope.data[2]={};
    $scope.data[2].key='Stream3';
    $scope.data[2].yAxis=2;
    $scope.data[2].type='multiBarChart';
    $scope.data[2].values=[];

     $scope.data[2].values[0]={};
    $scope.data[2].values[0].key="Stream0";
    $scope.data[2].values[0].values=[];
    $scope.data[2].values[0].values[0]={};
    $scope.data[2].values[0].values[0].key="Stream0";
    $scope.data[2].values[0].values[0].series=0;
    $scope.data[2].values[0].values[0].x=0;
    $scope.data[2].values[0].values[0].y=5;

     $scope.data[2].values[1]={};
    $scope.data[2].values[1].key="Stream1";
    $scope.data[2].values[1].values=[];
    $scope.data[2].values[1].values[0]={};
    $scope.data[2].values[1].values[0].key="Stream1";
    $scope.data[2].values[1].values[0].series=1;
    $scope.data[2].values[1].values[0].x=0;
    $scope.data[2].values[1].values[0].y=4;
    /*********************************/
    console.log($scope.data);


});

Answer 1

请在下面找到plunkr '带有可配置工具提示、条件点突出显示、面积图、条形图和折线图的多图

欢迎评论

Angular NvD3 Multichart 不工作

Angular NvD3 Multichart is not working

angularjs

d3.js

nvd3.js