Question

我目前正在使用Angular-NVD3库生成如下所示的图表：

我的任务是在图表上添加一条参考线作为目标日期。我已经找到了一种在y轴上添加渐近线的方法，一种绘制另一条线[targetDate, y] where y = [0:max]的方法，以及一种在同一轴上添加线图的方法。不幸的是，我的搜索没有任何结果。我的目标是在代码中创建一个如下所示的图形：

有人知道我该怎么做吗？

Answer 1

一种方法可能是获取数据集数组并将新数据推入其中，只有两个值/点，x值在目标日期之前和之后，y值低于最小值在您的数据集中，分别高于最大值：

var targetDate = Date.parse('May 2022');

var targetLine = {
    key: 'Target Date',
    color: '#000',
    area: false,
    classed: 'target-date-line',  
    values: [
        [(targetDate - 1 msec), minValue],
        [(targetDate + 1 msec), maxValue]
    ]
};

＆＃13;

var app = angular.module('snippet', ['nvd3']);

app.controller('MainCtrl', function($scope) {

  $scope.options = {
    chart: {
      type: 'lineChart',
      height: 450,
      margin : {
        top: 20,
        right: 20,
        bottom: 80,
        left: 75
      },
      showLegend: false,
      x: function(d){ return d[0]; },
      y: function(d){ return d[1]; },
      isArea: function (d) {
        return d.area;
      },
      xAxis: {
        axisLabel: 'date',
        tickFormat: function(d){
          return d3.time.format('%b %Y')(new Date(d));
        },
        tickPadding: 10,
        axisLabelDistance: 10
      },
      yAxis: {
        axisLabel: 'value',
        axisLabelDistance: 10
      },
      tooltip: {
        enabled: true
      },
      callback: function(chart){
        console.log("!!! lineChart callback !!!");
      }
    },
    title: {
      enable: true,
      text: 'Line Chart with Target'
    }
  };

  $scope.data = [];
  
  
  var lineData = [
    {"key":"Some Val","area": true, "color":"#9bcd9b","values":[[1462075200000,0],[1525147200000,12],[1588305600000,26],[1651377600000,42],[1714536000000,60],[1777608000000,100]]},
    {"key":"Other Val","area": true, "color":"#e34343","values":[[1462075200000,0],[1525147200000,10],[1588305600000,21],[1651377600000,33],[1714536000000,46],[1777608000000,57]]}
  ];
  
  var targetDate = Date.parse('May 2022');
  
  var minVal = _.min(_.flatten(_.map(lineData, function(dataset) {
    return _.map(dataset.values, function(val) {
      return val[1];
    });
  })));
  
  var maxVal = _.max(_.flatten(_.map(lineData, function(dataset) {
    return _.map(dataset.values, function(val) {
      return val[1];
    });
  })));

  var targetLine = {
    key: 'Target Date',
    color: '#000',
    area: false,
    classed: 'target-date-line',
    /**
     * set first x value to target date - 1 msec
     * second x value to target + msec1
     * 
     * set first y value to minimum of data values (or less)
     * second y value to something higher than the max value in data
     */ 
    values: [[targetDate - 1, minVal],[targetDate + 1,1.5*maxVal]]
  }

  lineData.push(targetLine);
  $scope.data = lineData;

});

＆＃13;

.target-date-line {
  stroke-dasharray: 5,5;
}

.target-date-line path.nv-line {
  stroke-width: 1px;
}

＆＃13;

<!DOCTYPE html>
<html ng-app="snippet">

  <head>
    <meta charset="utf-8" />
    <title>Angular-nvD3 Line Chart</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="lodash.js@4.6.1" data-semver="4.6.1" src="https://cdn.jsdelivr.net/lodash/4.6.1/lodash.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>    

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    
    <nvd3 options="options" data="data"></nvd3>
    
  </body>

</html>

＆＃13;

Answer 2

您可以尝试使用multichart（带条+线）并仅在目标日期添加条形码。 http://krispo.github.io/angular-nvd3/#/multiChart

在NVD3图表上添加参考线

2 个答案: