Question

我想使用Angularjs NvD3创建包含Line和MultiBar Chart的Multichart图。我必须创建线图但无法显示Multibar图表，我想我犯了一些错误。这是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 'multichart with configuredable tooltip，条件点高亮，面积图，条形图和折线图

插入评论

Angular NvD3 Multichart不起作用

1 个答案: