как установить цвет на Angular-nvd3 (1.0.7)

Question

Я работаю над проектом AngularJS 1.5.3 и использую Angular-nvd3 (1.0.7). Я встретил 2 проблемы:

1, когда я использую discreteBarChart, мне нужно назначить разные цвета для каждого столбца, например: (кажется, что изображение не может отображаться, вы можете представить его, это простая диаграмма, такая как http://krispo.github.io/angular-nvd3/#/discreteBarChart)

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

и второй вопрос: мне нужно использовать мульти-диаграмму, например: http://krispo.github.io/angular-nvd3/#/multiChart. не нужно так сложно, как ссылка. просто нужна пара гистограмм. но я не знаю правильную структуру данных. И это не в документации. поэтому я надеюсь, что кто-то может помочь мне с этими двумя проблемами.

Answer 1

Ответ на ваш первый запрос: Вы можете установить разные цвета для каждой гистограммы в отдельной диаграмме гистограммы несколькими способами:

1.Первый подход:

Настройте объект $scope.options, который вы предоставляете для директивы nvd3 , и предоставьте список цветового кода, который вы хотите использовать для своих столбцов.Вы можете указать название цвета, Hex Code of Color или RGB Code of Color.

View Этот Plunkr для рабочей демонстрации первого подхода.Пожалуйста, ознакомьтесь с plunkr перед прочтением объяснения.

В этой демонстрации вы можете видеть, что цвета представлены в виде списка в $scope.options объекте.Первый цвет представлен как название цвета, т.е. красный, второй цвет представлен как RGB-код, а все остальные цвета представлены как шестнадцатеричный код.Вы можете указать любое количество цветов в списке.

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

---

2.Второй подход:

Представление Этот Plunkr для рабочей демонстрации второго подхода.Пожалуйста, посмотрите plunkr перед прочтением объяснения.

Во втором подходе цвет предоставляется $scope.data объектом, который вы предоставляете директиве nvd3 , и мы внесли необходимые изменения в $scope.optionsобъект конфигурации.Здесь в объекте $scope.options поле цвета установлено на функцию, которая возвращает поле цвета отдельных объектов массива $scope.data, то есть «пурпурный» для первого, rgb (10,20,30) для второго и т. Д.

Надеюсь, это поможет !!
Скоро вернемся с решением вашей второй проблемы.