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."

Все ответы

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

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

Источник
Translate

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

...,
plotOptions: {
  pie: {
   colors: [
     '#50B432', 
     '#ED561B', 
     '#DDDF00', 
     '#24CBE5', 
     '#64E572', 
     '#FF9655', 
     '#FFF263', 
     '#6AF9C4'
   ],
   allowPointSelect: true,
   cursor: 'pointer',
   dataLabels: {
     enabled: false
   },
   showInLegend: true
 }
},
...
Источник
Translate

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

Highcharts.theme = {colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', 
                             '#64E572', '#FF9655', '#FFF263', '#6AF9C4']});
Источник
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 срезов.

Источник
Translate
Highcharts.setOptions({
 colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326',      '#6AF9C4']
});
Источник
Translate

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

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

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

Источник
Translate

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

Источник
Translate

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

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

Источник
Leave a Reply
You must be logged in to post a answer.
Об авторе