Диаграммы Angular nvd3 — разброс и линия на одной оси x

Я хочу создать диаграмму с точками и линиями, чтобы точки располагались в определенных местах (не подряд)

    /* Chart options */
    $scope.options = {
        chart: {
            type: 'multiChart',
            height: 500,
            width: 600,
            margin: {
                top: 30,
                right: 60,
                bottom: 50,
                left: 70
            },
            xAxis: {
                tickFormat: function (d) {
                    return d3.format(',f')(d);
                }
            },
            yAxis: {
                tickFormat: function (d) {
                    return d3.format('.02f')(d);
                }
            }
        }
};

    /* Chart data */
    $scope.data = [
        {
            key: 'One',
            type: 'line',
            yAxis: 1,
            xAxis:1,
            values: [{x:1, y:11}, {x:2, y:10}, {x:3, y:14}, {x:4, y:21}, {x:5, y:13}, {x:6, y:21}, {x:7, y:21}, {x:8, y:18}, {x:9, y:11}, {x:10, y:11}, {x:11, y:18}, {x:12, y:14}, {x:13, y:10}, {x:14, y:20}, {x:15, y:21}, {x:16, y:28}, {x:17, y:12}, {x:18, y:16}, {x:19, y:22}, {x:20, y:18}, {x:21, y:21}, {x:22, y:10}, {x:23, y:11}, {x:24, y:14}, {x:25, y:9}, {x:26, y:14}, {x:27, y:10}, {x:28, y:21}, {x:29, y:11}, {x:30, y:10}, {x:31, y:14}, {x:32, y:21}, {x:33, y:13}, {x:34, y:21}, {x:35, y:21}, {x:36, y:18}, {x:37, y:11}, {x:38, y:11}, {x:39, y:18}, {x:40, y:14}, {x:41, y:10}, {x:42, y:20}, {x:43, y:21}, {x:44, y:28}, {x:45, y:12}, {x:46, y:16}, {x:47, y:22}, {x:48, y:18}, {x:49, y:21}, {x:50, y:10}, {x:51, y:11}, {x:52, y:14}, {x:53, y:9}, {x:54, y:14}, {x:55, y:10}, {x:56, y:21}, {x:57, y:11}]
        }
        ,
        {
            key: 'Two',
            type: 'scatter',
            yAxis: 1,
            xAxis:1,
            values: [{x:1,y: 16, shape:'cross'},{x: 4, y:36, shape:'cross'}]
        }
    ];

Но я получаю следующее: Второй Второй мяч находится не в координатах x=4 и y=36, а в конце

введите здесь описание изображения


charts angularjs line scatter angular-nvd3
person yzavyalo    schedule 20.04.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел решение (JSFiddle пример):

  $scope.options = {

        ...

        scatters1: {
           xDomain: [0,57]
        },

        ...
  }

Также проверьте это обсуждение https://github.com/novus/nvd3/issues/1513

P.S. Также я думаю, что это хороший способ динамически установить xDomain, поэтому я имею в виду:

  var lineValues = [{x:1, y:11}, {x:2, y:10}, {x:3, y:14}, {x:4, y:21}, {x:5, y:13}, {x:6, y:21}, {x:7, y:21}, {x:8, y:18}, {x:9, y:11}, {x:10, y:11}, {x:11, y:18}, {x:12, y:14}, {x:13, y:10}, {x:14, y:20}, {x:15, y:21}, {x:16, y:28}, {x:17, y:12}, {x:18, y:16}, {x:19, y:22}, {x:20, y:18}, {x:21, y:21}, {x:22, y:10}, {x:23, y:11}, {x:24, y:14}, {x:25, y:9}, {x:26, y:14}, {x:27, y:10}, {x:28, y:21}, {x:29, y:11}, {x:30, y:10}, {x:31, y:14}, {x:32, y:21}, {x:33, y:13}, {x:34, y:21}, {x:35, y:21}, {x:36, y:18}, {x:37, y:11}, {x:38, y:11}, {x:39, y:18}, {x:40, y:14}, {x:41, y:10}, {x:42, y:20}, {x:43, y:21}, {x:44, y:28}, {x:45, y:12}, {x:46, y:16}, {x:47, y:22}, {x:48, y:18}, {x:49, y:21}, {x:50, y:10}, {x:51, y:11}, {x:52, y:14}, {x:53, y:9}, {x:54, y:14}, {x:55, y:10}, {x:56, y:21}, {x:57, y:11}];


  $scope.options = {

    ...

    scatters1: {
       xDomain: [0, lineValues[lineValues.length - 1].x] // get x of last item
    },

    ...
  } 

  $scope.data = [
    {
        key: 'One',
        type: 'line',
        yAxis: 1,
        xAxis:1,
        values: lineValues
    }
    ,
    {
        key: 'Two',
        type: 'scatter',
        yAxis: 1,
        xAxis:1,
        values: [{x:1,y: 16, shape:'cross'},{x: 4, y:36, shape:'cross'}]
    }
];
person Leguest    schedule 20.04.2017