highcharts примеры - Как вы меняете цвет каждой категории в диаграмме столбцов с большими диаграммами?





api series (10)


Как упоминалось antonversal, чтение цветов и использование параметра цвета при создании объекта диаграммы работает.

var chart3 = new Highcharts.Chart({colors: ['#458006', '#B0D18C']});

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




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

$('#container').highcharts({
colors: ['#2f7ed8','#910000','#8bbc21','#1aadce'],
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},






Да, вот пример в jsfiddle: http://jsfiddle.net/bfQeJ/

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

Например, круговая диаграмма, но вы можете просто заполнить серию всеми цветами до вашего сердца =)




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

data: [
      {y: 34.4, color: 'red'},     // this point is red
      21.8,                        // default blue
      {y: 20.1, color: '#aaff99'}, // this will be greenish
      20]                          // default blue

Пример по jsfiddle




{plotOptions: {bar: {colorByPoint: true}}}



добавить свойства:

 colors: ['Red', 'Bule', 'Yellow']



Просто добавьте это ... или вы можете изменить цвета согласно вашему требованию.

Highcharts.setOptions({
        colors: ['#811010', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
        plotOptions: {
            column: {
                colorByPoint: true
            }
        }

    });



просто поместить диаграмму

$('#container').highcharts({
colors: ['#31BFA2'], // change color here
chart: {
        type: 'column'
}, .... Continue chart



Мне нужно было сделать что-то подобное. Надеюсь, поможет.

Отказ от ответственности: я использую упаковщик GWT Highcharts!

Вот основные моменты того, что я сделал:

1) Я создал интерфейс FooCallback, который имеет панель методов (int index) и реализовал его

2) Создал метод getBarClickCallback, который возвращает JavascriptObject (функцию), которая имеет FooCallback в качестве параметра

3) Я добавляю обратный вызов клика в параметр диаграммы / plotOptions / series / point / events / click, передавая его getBarClickCallback

4) При нажатии на панель вызывается FooCallback.bar (int index)

...

chart.setOption("/plotOptions/series/point/events/click",getBarClickCallback(this));

private native static JavaScriptObject getBarClickCallback(FooCallback callback) /*-{
    return function()
    {
        if( this.x !== "undefined" && this.x >= 0 ){
            [email protected]::bar(I)(this.x);
        }
    };
}-*/;

public void bar( int index ){
    //handle chosen index
}

...

Кроме того, я хотел слушать клики на ярлыках категорий (кстати, я показываю перевернутую гистограмму с категориями)

1) Создан метод, который будет находить категории в домене и добавлять к ним события кликов. Я назвал его addLabelClickHandler (обратный вызов FooCallback, String chartId) и использовал jquery для добавления событий.

2) Добавьте ChartLoadEventHandler, который вызывает addLabelClickHandler (), который перенаправляет параметры в addLabelClickHandler (обратный вызов FooCallback, String chartId)

3) После нажатия на категорию оси вызывается FooCallback.bar (int index) ...

chart.setLoadEventHandler(new ChartLoadEventHandler() {

    @Override
    public boolean onLoad(ChartLoadEvent chartLoadEvent) {
    addLabelClickHandler();
    return false;
    }
    });

private void addLabelClickHandler(){
    addLabelClickHandler(this,chart.getElement().getId());
}

private native static void addLabelClickHandler(FooCallback callback, String chartId)/*-{
        try {
            var search = '#' + chartId + ' .highcharts-axis-labels:first text';
            $wnd.jQuery(search).each(
                    function(i, j) {
                        $wnd.jQuery(this).css("cursor", "pointer");
                        $wnd.jQuery(this).click(function() {
                            [email protected]::bar(I)(this.x);
                        });
                    });
        } catch (err) {
            console.log(err);
        }

    }-*/;

Джефф





highcharts