Градиенты на флоте

Как я могу установить эффекты градиента на круговых диаграммах?

[{
label: i, 
data: 1000,
color: [ "rgb(190,110,110)", "rgb(140, 70, 70)", "rgb(110, 50, 50)", "rgb(60, 10, 10)" ]
},
//nextserie
]

Безразлично»т работа.

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

[{
label: i, 
data: 1000,
color: 1,
},
//nextserie
]

Ответы на вопрос(3)

Во время слияния патчей, один был представлен вместе свыпуск 355 (перейдите по ссылке на исходный код Google для получения вложения), которая добавляет градиенты к пирогам У меня нетЯ сам пока не пробовал.

 Hoffmann11 окт. 2012 г., 19:00
Вы знаете, добавляет ли этот патч радиальные градиенты, которые начинаются в центре пирога? Или это просто настройка непрозрачности на весь пирог снизу вверх?
 Hoffmann11 окт. 2012 г., 19:13
Кажется, что патч использует линейный градиент, что очень странно для круговых диаграмм. Думаю, мне придется написать свою собственную.
 Hoffmann11 окт. 2012 г., 20:53
Если вам когда-нибудь понадобится функционал @DNS, проверьте мой ответ
 DNS11 окт. 2012 г., 19:00
Без понятия; гавань»Я пытался его использовать.
 DNS11 окт. 2012 г., 21:53
Спасибо за это!

я сделал это сам. Мне потребовалось некоторое время, чтобы понять, как внутренне работает flot, но в конце концов я нашел ту часть, где мне нужно было измениться. В jquery.flot.pie.js измените функцию drawSlice (строка 406 на Flot 0.7) на:

            function drawSlice(angle, color, fill)
            {   
                if (angle<=0)
                    return;


                if (fill) {
                    if (typeof color === "object") {
                        var grad= ctx.createRadialGradient(0, 0, 0, 0, 0, radius);
                        var i;
                        var numColors= color.colors.length;
                        for (i=0; i< numColors ; i++) {
                            grad.addColorStop(i/(numColors-1), color.colors[i]);
                        }
                        ctx.fillStyle = grad; 
                    } else {
                        ctx.fillStyle = color;
                    }
                    ctx.fillStyle = color;
                } else {
                    ctx.strokeStyle = color;
                    ctx.lineJoin = 'round';
                }

дон»удалить оставшуюся часть кода после if.

И теперь, как по волшебству, вы можете определять свои серии с помощью цветов радиального градиента:

[{
            label: i, 
            data: Math.random() *1000,
            color: { colors: [ "rgb(190,110,110)", "rgb(140, 70, 70)", "rgb(110, 50, 50)", "rgb(60, 10, 10)" ] }
}]

Я постараюсь сделать классный график, затем сделаю скриншот и выложу здесь.

РЕДАКТИРОВАТЬ: Здесь вы идете:

var d1= [];
    d1.push({
        label: "Crítico", 
        data: Math.random() *1000,
        color: { colors: [ "rgb(190,110,110)", "rgb(140, 70, 70)", "rgb(110, 50, 50)", "rgb(60, 10, 10)" ] }
    });
    d1.push({
        label: "Médio", 
        data: Math.random() *1000,
        color: { colors: [ "rgb(110,110,190)", "rgb(70, 70, 140)", "rgb(50, 50, 110)", "rgb(10, 10, 60)" ] }
    })
this.plot= $.plot($div, d1);

Это'намного лучше, чем использование сплошных цветов, но это может стать намного лучше, яЯ просто плохо выбираю цвета. Теперь я нашел небольшую проблему, легенды неt работать с моими изменениями, цвет не будет отображаться на них. Я'Я не хочу это исправлять, так как эта функциональность присутствует в основном файле Flot (который намного больше и сложнее, чем плагин pie), и я неу меня не так много свободного времени, чтобы возиться с этим.

Решение Вопроса

радиальными или линейными. Мой коммит указан втянуть запрос № 853.

Пример "дефолт" круговая диаграмма с радиальным градиентом:

$.plot($("#default_gradient"), data, {
    series: {
      pie: {
        show: true,
        gradient: {
          radial: true,
          colors: [
            {opacity: 0.5},
            {opacity: 1.0}
          ]
        }
      }
    }
});

Пример кольцевой диаграммы с радиальным градиентом:

$.plot($("#donut_gradient"), data,
  {
    series: {
      pie: {
        innerRadius: 0.5,
        show: true,
        gradient: {
          radial: true,
          colors: [
            {opacity: 1.0},
            {opacity: 1.0},
            {opacity: 1.0},
            {opacity: 0.5},
            {opacity: 1.0}
          ]
        }
      }
    }
});

Пример наклонной круговой диаграммы с радиальным градиентом:

  $.plot($("#graph9_gradient"), data,
  {
    series: {
      pie: {
        show: true,
        radius: 1,
        tilt: 0.5,
        gradient: {
          radial: true,
          colors: [
            {opacity: 0.5},
            {opacity: 1.0}
          ]
        },
        label: {
          show: true,
          radius: 1,
          formatter: function(label, series){
            return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br>'+Math.round(series.percent)+'%</div>';
          },
          background: { opacity: 0.8 }
        },
        combine: {
          color: '#999',
          threshold: 0.1
        }
      }
    },
    legend: {
      show: false
    }
  });

Изменения были основаны на комбинации вышеупомянутых предложений, предложенных @Hoffman ипатч предложено вФлот № 355 отЛюк Будро.

 Hoffmann05 нояб. 2012 г., 12:25
Эй, чувак, очень круто. Я принял твой ответ, этоСкорее всего, гораздо менее хакерский, чем мой. Скажите, это работает с эффектом наклона?
 Hoffmann11 дек. 2012 г., 14:23
Привет @mtr, есть ошибка при использовании линейных градиентов. Они покрывают только половину круговой диаграммы. Чтобы исправить это в функции drawSlice, измените ее следующим образом:больше не использую свойство top, поэтому яЯ не уверен, исправит ли это 100% на графиках, которые не находятся в центре графика (возможно, добавьте половину вершины к обоим ненулевым параметрам?). В любом случае градиент также должен начинаться от нижней части области графика, а не от начала круговой диаграммы, что ухудшает качество на диаграммах, в которых круговая диаграмма не полностью покрывает область графика. Радиальные градиенты в порядке.
 Martin Thorsen Ranang05 нояб. 2012 г., 13:35
@Hoffmann, спасибо, что приняли мой ответ. Я обновил свой ответ, включив в него пример с наклонной круговой диаграммой, и, похоже, он работает, по крайней мере, в соответствии с моими ожиданиями. Он также работал с линейным градиентом, но выглядел плохо, так что я неНе могу привести пример этого.

Ваш ответ на вопрос