Условные цвета на основе данных кольцевой диаграммы с C3js

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

color: function (color, d) {

if (d.value < 25) {
 return "#f00";
}

но я не могу понять пончик.

Что я имею в виду:

  • Есть только два среза (и две группы данных), A и B, и каждый имеет только 1 значение, например. A = 35 и B = 65, т. е. всего два столбца

  • Срез B всегда должен иметь постоянный цвет, например. "серый" независимо от его значения

  • Срез и его цвет должны зависеть от значений A, например. если значение > 50, то цвет красный, если значение > 75, то цвет оранжевый и так далее.

Например: A равно 45, а B равно 55. Срез красный. Б серый. Входные данные меняются (т.е. график обновляется). Теперь A 60, а B 40. B по-прежнему серый (так было всегда), но теперь A должен быть оранжевым. Входные данные меняются. A — 90, B — 10. B — серый. А зеленый и так далее.

Большое спасибо за любую помощь! \о/


donut-chart c3.js
person Peter    schedule 23.08.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думал, что это будет просто, но я не могу получить дескриптор объекта диаграммы в функции цвета, а «это» всегда либо объект Window, либо undefined.

Это то, что мне удалось, и это связано с использованием внешней переменной в качестве кеша:

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

var temp = {};
var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30],
            ['data2', 120],
        ],
        color: function (color, d) {
            console.log (arguments, this, chart);
            if (d.values) {
                var id = d.id;
                var newColour = d.values[0].value > 40 ? "red" : "blue";
                temp[id] = newColour;
            }
            return temp[d] || color;
        },
        type : 'donut',
    },
    donut: {
        title: "Iris Petal Width"
    }
});

Скопируйте его в https://c3js.org/samples/chart_donut.html, чтобы увидеть, как он работает.

Ответ 2

На самом деле, другой (недокументированный) способ сделать это выглядит так:

color: {
    pattern: ['red', 'green', 'blue', 'orange', 'turquoise'], // colors for values
    threshold: {
        values: [30, 60, 90, 100, 150]
    }
}

Сектор принимает цвет в массиве шаблонов по индексу первого порогового значения, которое меньше (например, 59 меньше 60, поэтому значение будет зеленым)

Тем не менее, это забивает статические цвета для определенных рядов данных, и любой способ сделать непрерывную цветовую шкалу, если вы когда-либо хотели этого

person mgraham    schedule 25.08.2018
comment
Ого, большое спасибо! Не знаю, кто минусовал мой вопрос. Большое спасибо за ответ! Последующая проблема: как сохранить один из цветов постоянным, например. data2 как всегда зеленый? т.е. тогда условная окраска применяется только к data1. - person Peter; 26.08.2018
comment
вы можете добавить что-то вроде if (d === 'data2' || d.id === 'data2') return "green"; в начале функции или, если цвет уже был установлен (например, в data.colors), просто верните цвет, переданный в if (d === 'data2' || d.id === 'data2') return color; - person mgraham; 26.08.2018
comment
У меня есть поддерживающий вопрос, не стоит открывать новую «вопрос/заявку» о базовом javascript nad C3js, но я не могу отправить вам сообщение напрямую. Судя по всему такой функциональности нет. Не могли бы вы сообщить мне, как связаться с вами напрямую? Электронная почта возможно? Это было бы очень признательно. - person Peter; 26.09.2018
comment
Если он достаточно короткий, просто задайте свой вопрос в комментарии здесь. - person mgraham; 28.09.2018
comment
Спасибо за ответ. Проблема незначительна, но объяснение (с примером) требует места. Не могли бы вы написать мне по адресу redbulldiet-at-protonmail.com? Спасибо. - person Peter; 29.09.2018