javascript - Как я могу изменить цвета моей круговой диаграммы?

Translate

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

Вот мой код:

     <script type="text/javascript">
     $(function () {
     Highcharts.setOptions({
     colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263',      '#6AF9C4']
    });
    return new Highcharts.Chart({


        chart: {
            renderTo: 'trailpiechart',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            backgroundColor: "#f8f8f8",
            margin: [20, 20, 20, 20]
        },


        credits: {
            enabled: false
        },

        title: {
            text: caption
        },
        tooltip: {
            formatter: function () {
                return this.y + ' links';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        legend: {
            layout: 'vertical',
            floating: false,
            borderRadius: 0,
            borderWidth: 0
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: data
        }]
    });
    });
</script>

Моя круговая диаграмма работает с этим кодом, но использует только цветовую палитру по умолчанию.

Как указать собственный набор цветов?

Источник

This question and all comments follow the "Attribution Required."

Все ответы

Ricardo Alvaro Lohmann

Translate

Highcharts.setOptions({
 colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});

Посмотрите следующий примерhttp://jsfiddle.net/8QufV/

Источник

Ali Yazdani

Translate

Для тех из вас, кто предпочитает инициализировать цвет в конфигурациях, вы можете просто поместить цвета в часть plotOptions объекта конфигурации следующим образом:

...,
plotOptions: {
  pie: {
   colors: [
     '#50B432', 
     '#ED561B', 
     '#DDDF00', 
     '#24CBE5', 
     '#64E572', 
     '#FF9655', 
     '#FFF263', 
     '#6AF9C4'
   ],
   allowPointSelect: true,
   cursor: 'pointer',
   dataLabels: {
     enabled: false
   },
   showInLegend: true
 }
},
...

Источник

Linger

Translate

Я думаю, что вам нужно установить цвета с помощью темы вместо setOptions следующим образом:

Highcharts.theme = {colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', 
                             '#64E572', '#FF9655', '#FFF263', '#6AF9C4']});

Источник

BJax

Translate

Чтобы ответить на вопрос @Loko Web Designhttps://stackoverflow.com/a/38794379/7475250

Есть ли веб-страница, на которой написано, чему соответствует каждый из «цветов»? Все ответы здесь показывают что-то вроде:
colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']
Но что на самом деле меняют # 333, # CB2326 и т. Д.? Очевидно, я могу просто изменить их и посмотреть, что изменится, но было бы неплохо иметь где-нибудь эту ссылку.

Цветные документы доступныВот. Хотя они и полезны, они не описывают, что на самом деле происходит с изменением определенного цвета. Ниже мое лучшее описание.

Опора цветов дает Highcharts цвета, которые вы хотите, чтобы диаграмма отображалась в цикле. Например, если у вас была следующая цветовая опора.

colors: ['blue', 'green']

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

Расширение списка цветов увеличивает количество цветов перед повторением.

colors: ['blue', 'green', 'yellow']

Повторял бы цвета, если бы в вашем наборе данных было более 4 срезов.

Источник

min2bro

Translate

Highcharts.setOptions({
 colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326',      '#6AF9C4']
});

Источник

Loko Web Design

Translate

Есть ли веб-страница, на которой написано, чему соответствует каждый из «цветов»? Все ответы здесь показывают что-то вроде:

colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']

Но что на самом деле меняют # 333, # CB2326 и т. Д.? Очевидно, я могу просто изменить их и посмотреть, что изменится, но было бы неплохо иметь где-нибудь эту ссылку.

Источник

bugovicsb

Translate

У меня такая же проблема. В highcharts.css есть раздел «Цвета по умолчанию». После того, как я удалил этот раздел, я мог использовать собственные цвета. В любом случае, я думаю, вам не нужен highcharts.css, если вы используете версию v5.0.4 или выше.

Источник

Kondal

Translate

Highcharts.Color (Highcharts.getOptions (). Colors [0]). SetOpacity (0.5) .get ('rgba')]

В высоких графиках встроенных цветов у нас нет. Итак, вам нужно изменить путь цвета [0] или [1] ........ [6]

Источник

You must be logged in to post a answer.

Об авторе

Sreenath Plakkat

javascript - Как я могу изменить цвета моей круговой диаграммы?

Все ответы

Leave a Reply

Об авторе

Похожие проблемы

Category