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

Я работаю над проектом 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 . не нужно так сложно, как ссылка. просто нужна пара гистограмм. но я не знаю правильной структуры данных, и ее нет в документации. поэтому я надеюсь, что кто-то может помочь мне с этими двумя проблемами.


angularjs nvd3.js angular-nvd3 angular1.6 ng2-nvd3
person Neko    schedule 16.04.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

<сильный>1. Первый подход:

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

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

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

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

<сильный>2. Второй подход:

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

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

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

person Tejas Rathi    schedule 16.04.2019
comment
спасибо за ваш ответ, я попробовал, скопировал все параметры и данные. график показывает.. но я вижу только данные там, но полоса не отображается. но когда я наводил на него курсор мыши, он давал мне всплывающие подсказки, поэтому панель существует, но я ее не вижу. - person Neko; 17.04.2019
comment
Можете ли вы создать plunkr для того, что вы сделали. Возможно, вы пропустили включение некоторых зависимостей. Рабочий планкр поможет разобраться в происходящем. - person Tejas Rathi; 17.04.2019