1

我正在使用 angular-nvd3 并且在弄清楚如何改变动画方式时遇到了很多麻烦。

以下是打开数据集时当前发生的情况。如您所见，费用从右上角开始动画，距离直接从右侧开始动画。我希望他们俩都做的是两件事之一。要么用基本的淡入动画，要么向上生长。

在此处输入图像描述

这是我的控制器。有趣的是，当我添加 yDomain1: [1, 200] 时，它导致距离图表直接从右侧开始动画，在此之前它也是从右上角开始动画的。

controllers.controller("DashboardController", ['$scope','MileageRestService',
($scope,MileageRestService)->

  $scope.vehicle_log_data = {}

  MileageRestService.dashboard(
    (result)->
      console.log('dashboard result', result)
      $scope.vehicle_log_data = result

      distances = result.current_year.chart_data.distances
      expenses = result.current_year.chart_data.expenses

      $scope.data = [
        {
          key: "Distances",
          color: '#ff7f0e',
          area: true,
          type: "line",
          yAxis: 1,
          values: distances
        },
        {
          key: "Expenses",
          color: '#7777ff',
          area: true,
          type: "line",
          yAxis: 2,
          values: expenses
        }
      ]

      $scope.options = {
        chart: {
          type: 'multiChart',
          height: 256,
          margin : {
            top: 20,
            left: 50
          },
          x: (d)-> d.x,
          y: (d)-> (d.y),
          showValues: true,
          lines1: {
            duration: 500
          },
          lines2: {
            duration: 500
          },
          yDomain1: [1, 200],
          transitions: true,
          useInteractiveGuideline: true,
          clipEdge: false
        }
      }

    (error)->
      console.log('dashboard error', error)
  )
])

距离和费用数据为：

distance = [
    {x: 1, y: 100},
    {x: 2, y: 25},
    {x: 3, y: 150},
    {x: 4, y: 110},
    {x: 5, y: 0},
    {x: 6, y: 175},
    {x: 7, y: 0},
    {x: 8, y: 0},
    {x: 9, y: 0},
    {x: 10, y: 0},
    {x: 11, y: 0},
    {x: 12, y: 0}
]

expenses = [
    {x: 1, y: 10},
    {x: 2, y: 5},
    {x: 3, y: 15},
    {x: 4, y: 7.75},
    {x: 5, y: 0},
    {x: 6, y: 20},
    {x: 7, y: 0},
    {x: 8, y: 0},
    {x: 9, y: 0},
    {x: 10, y: 0},
    {x: 11, y: 0},
    {x: 12, y: 0}
]
4

0 回答 0