Как я могу изменить цвета моего highcharts piechart?

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

Вот мой код:

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

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

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

Ответы

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

Highcharts.Color(Highcharts.getOptions(). Цветов [0]). SetOpacity (0,5).get( 'RGBA')]

В высоких чартах встроенные цвета у нас есть. Поэтому вам нужно изменить путь цвета [0] или [1]........ [6]

Ответ 8

Чтобы ответить на вопрос @Loko Web Design fooobar.com/info/132864/...

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

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

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

Доступны цветовые документы здесь. Хотя они полезны, они не описывают, что на самом деле меняет конкретный цвет. Ниже приводится мое лучшее описание.

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

colors: ['blue', 'green']

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

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

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

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