Highcharts - применить градиент на пользовательских цветах

Question

Это моя модель данных:

data = [{y: 123, color: "#FF7600"}, {y: 321, color: "#00FFE3"}, {y: 213,color: "#444444"}] 

Тогда ряд добавляется в виде круговой диаграммы:

$http({ method: 'GET', url: /pie-chart, params: {}) 
    .success(function (data) { 
     chart.addSeries({ 
     type: 'pie', 
     data: data 
    }) 
}); 

Вот официальное Highcharts демо: http://www.highcharts.com/demo/pie-gradient
It перебирает данные, читает цвета, создает массив цветов и использует этот массив при рисовании диаграммы.
Но я думаю о решении, которое позволяет избежать извлечения цветов из JSON.
Любая идея? Большое спасибо.

отредактировано, решено

Давал его :).
Я закончил создание цветных массивов, как описано в демо-версии.
Он хорошо работает.

// Get colors from received data, create color array, 
var colors = []; 
for (var i = 0; i < data[0].series.length; i++) { 
    colors.push(data[0].series[i].color); 
    // Delete original colors, so that new radialized are used 
    delete(data[i].color); 
} 

// Use color array and radialize each color 
Highcharts.getOptions().colors = Highcharts.map(colors, function(color) { 
    return { 
     linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 }, 
      stops: [ 
       [0, color], 
       [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken 
      ] 
     }; 
    }); 

Answer 1

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

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

chartData представляет собой массив данных, как:

[ 
    { 
     "color": "#01080f", 
     "name": "No Status", 
     "y": 8570 
    }, 
    { 
     "color": "#1A942C", 
     "name": "Deployed", 
     "y": 27952 
    }, 
    ... 
    { 
     "color": "#f36e20", 
     "name": "Out of sync", 
     "y": 241 
    } 
] 

В моем яваскрипта коде извлекается с сервера и применяется к series.data элементу объекта Highcharts в.

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

// Retrieve your chart data 
$.getJSON('/api/endpoint/policystatus', function (chartData) { 

    // Function replaces flat colors with gradients 
    function colorizeData(data) { 
     data.color = { 
      radialGradient: {cx: 0.5, cy: 0.3, r: 0.7}, 
      stops: [ 
       [0, data.color], 
       [1, Highcharts.Color(data.color).brighten(-0.3).get('rgb')] // darken 
      ] 
     }; 
    } 

    // Call the function for each element in the retrieved data 
    chartData.forEach(colorizeData); 

    // Continue on to build your chart 
    $('#pie-general-status').highcharts({ 
    // .... 

выше «colorizeData» принимает входные данные диаграммы данных, ищет элемент «цвет», затем заменяет его с градиентом Highcharts на основе того же цвета.

Обратите внимание, что вы должны использовать значения hex или RGB; он не будет работать с цветами, определенными как слова «зеленый» или «синий».