2016-03-16 5 views
1

Я новичок в D3, NVD3 и Angular-NVD3. Мне нужно, чтобы создать диаграмму, которая выглядит примерно так, с помощью радиально-NVD3:Angular-NVD3 Сложенная диаграмма с линейкой

SO вопрос: NVD3 Stacked Bar Chart Plus Line Overlapped

(есть JS Fiddle на вопрос SO).

радиально-NVD3 имеет две диаграммы, которые каждый выполнить большую часть того, что мне нужно, но не все из них:

Те были бы мультибар и MultiChart. (http://krispo.github.io/angular-nvd3/#/quickstart) Примеры:

То есть мне нужна сложная гистограмма с линией (или линиями), наложенной поверх гистограммы. Я считаю, что для этого нужно использовать «multiChart» вместо графика «multiBar». (Пожалуйста, поправьте меня, если я ошибаюсь).

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

nv.d3.js (версия 1.8.2), для объекта multiChart, Линии 9068-9069:

bars1 = nv.models.multiBar().stacked(false).yScale(yScale1), 
    bars2 = nv.models.multiBar().stacked(false).yScale(yScale2), 

Если изменить эти строки .stacked(true), он делает стек баров.

Как использовать Angular-NVD3 и выполнять то, что мне нужно, без изменения библиотеки?

Идеально решение было бы чистой конфигурацией. Следующей наиболее идеальной ситуацией было бы установить «сложное» значение во время выполнения из моего входящего компонента, но я не могу получить доступ к объекту.

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

ответ

4

Я нашел ответ:

вы можете изменить значение в штабелироваться обработчика событий обратного вызова(), указанный в вашей конфигурации:

chart: { 
      type: 'multiChart', 
... 
      callback: function (chart) { 
       chart.bars1.stacked(true); 
       chart.bars2.stacked(true); 
       chart.update(); 
      }, 
... 
     } 
    }; 
Смежные вопросы