Nvd3.js - добавление нескольких осей у к накопительной диаграмме

Question

Мне нужно добавить несколько осей Y в мою кумулятивную диаграмму Nvd3. Кто-нибудь знает, какую часть кода библиотеки мне нужно изменить?

Еще лучше было бы, если бы вы сделали это сами и могли бы предоставить Jsfiddle.

Мы ценим любые предложения.

Answer 1

Есть только определенные типы диаграмм, которые имеют функциональность с несколькими осями Y.

Это не доступно для Накопительной линейной диаграммы.

Однако он доступен для мульти-графика. Здесь есть пример на домашней странице Angluar NVD3, но он показывает пример с барами и линиями.

Я добавил пример плунжера с домашней страницы и изменил типы рядов на все линии, чтобы показать вам, как вы можете использовать мульти для достижения того же результата, что и совокупный линейный график.

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

Пример Pluker

Прежде всего, добавьте параметры для нескольких осей:

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

Определите ваши данные:

 $scope.data = [{key: 'series1', type: "line", yAxis: 1, values:[{x: 10, y: 20}, {x: 20, y: 35}, {x: 30, y:18}]},
        {key: 'series2',  type: "line", yAxis: 1,values:[{x: 10, y: 12}, {x: 20, y: 26}, {x: 30, y: 15}]},
        {key: 'series3',  type: "line", yAxis: 2,values:[{x: 10, y: 0.75}, {x: 20, y: 0.9}, {x: 30, y: 0.8}]},
        {key: 'series4',  type: "line", yAxis: 2,values:[{x: 10, y: 0.2}, {x: 20, y: 0.3}, {x: 30, y: 0.4}]}]

Обратите внимание type а также yAxis ключи установлены здесь против каждой серии.

Установите свой <div> как обычно:

 <nvd3 options="options" data="data"></nvd3>

И это все!

Вы получите тот же график, что и с накопленной линейной диаграммой, но с возможностью установки нескольких осей.

Answer 2

Если вы имеете в виду добавление нескольких осей у к одному графику, который уже доступен в линейной и гистограмме NVD3. Частичный фрагмент кода показан ниже.

      chart.y1Axis
          .tickFormat(d3.format(',f'));

      chart.y2Axis
          .tickFormat(function(d) { return '$' + d3.format(',f')(d) });