Question

我想使用bar和scatterChart创建一个多图形，要求是在每个条形图上方显示一个代表某些数据的点。

我尝试过很多东西，但没有一个可以工作，这是我目前的代码：

$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);
            }
        },
        yAxis1: {
            tickFormat: function(d){
                return d3.format('.02f')(d);
            }
        },
        yAxis2: {
            tickFormat: function(d){
                return d3.format('.02f')(d);
            }
        }
    }
};    

$scope.data = [
    {
        key: 'X',
        type: 'scatterChart',
        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
    }
];

条形图和折线图正确显示，但散点图表示条形图上方的点。

非常感谢你的帮助

Answer 1

这是一个有效的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,
  x: function(d){return d.x;},
  y: function(d){return d.y;},
  xAxis: {
    axisLabel: 'Months',
    showMaxMin: true,
    tickFormat: function(d) {
      return d3.format(',.f')(d);
    }
  },
  yAxis: {
    axisLabel: 'Occupancies',
    axisLabelDistance: -20,
    tickFormat: function(d) {
      return d3.format(',.1f')(d);
    }
  }
}
};

$scope.data = $scope.data = [{
"key": "occ_n",
"values": [{
  "x": 1,
  "y": 0
}, {
  "x": 2,
  "y": 0
}, {
  "x": 3,
  "y": 0
}, {
  "x": 4,
  "y": 62
}, {
  "x": 5,
  "y": 4519
}, {
  "x": 6,
  "y": 7911
}, {
  "x": 7,
  "y": 14631
}, {
  "x": 8,
  "y": 15745
}, {
  "x": 9,
  "y": 3245
}, {
  "x": 10,
  "y": 0
}, {
  "x": 11,
  "y": 0
}, {
  "x": 12,
  "y": 0
}],
"type": "bar",
"yAxis": 1
}, {
"key": "occ_n_1",
"values": [{
  "x": 1,
  "y": 0
}, {
  "x": 2,
  "y": 0
}, {
  "x": 3,
  "y": 0
}, {
  "x": 4,
  "y": 726
}, {
  "x": 5,
  "y": 6000
}, {
  "x": 6,
  "y": 8205
}, {
  "x": 7,
  "y": 14596
}, {
  "x": 8,
  "y": 15129
}, {
  "x": 9,
  "y": 3396
}, {
  "x": 10,
  "y": 0
}, {
  "x": 11,
  "y": 0
}, {
  "x": 12,
  "y": 0
}],
"type": "scatter",
"yAxis": 1
}];
});

Answer 2

类型＆＃34; scatterChart＆＃34;在angular-nvd3中不存在。您必须指定类型＆＃34; scatter＆＃34;。

$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
}

angular-nvd3，如何组合scatterChart和bar？

2 个答案: