Установить цвет для круговой диаграммы с использованием данных HighChart + JSON

Question

Я генерирую круговую диаграмму из данных, хранящихся в формате JSON. Я пытаюсь изменить цвет в соответствии со значением JSON.

Ex: if value @ json [0] ['data'] [0] [0] = "FAILED" // setColor (RED).

Я смог установить цвет для диаграмм столбцов столбцов, используя options.series.color, однако, когда я попытался использовать эту опцию с круговой диаграммой, она преобразует данные в ряд и не может отобразить диаграмму на контейнере.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
    function getData(id) { 
    $.getJSON("pie.php", { 
     id: id 
    }, function(json) { 
     option.series = json; 
     chart = new Highcharts.chart(options); 
    }); 
    } 
</script> 

мы можем установить цвет в функции GetData только перед вызовом «диаграммы» или мне нужно использовать Highcharts.setOptions() и определить цветовые коды.

Answer 1

Лучший вариант заключается в создании серий, основанных на ваших данных json. Это можно сделать, чтобы указать цвет на основе данных.

var serie = { 
    data: [] 
}; 
var series = [serie]; 

jQuery.each(jsonData, function(index, pointData) { 

    var point = { 
     name: pointName, 
     y: pointData.Value, 
     color: pointData.Value == 'FAILED' ? 'ff0000' : '00ff00',  
     serverData: pointData 
    }; 

    serie.data.push(point); 
}); 
chart.series = series; 

ИЛИ

Посмотрите на это проще версии

JSFiddle

$(document).ready(function() { 
 

 
var data = [{ 
 
    "name": "Tokyo", 
 
    "data": 3.0 
 
}, { 
 
    "name": "NewYork", 
 
    "data": 2.0 
 
}, { 
 
    "name": "Berlin", 
 
    "data": 3.5 
 
}, { 
 
    "name": "London", 
 
    "data": 1.5 
 
}]; 
 

 
    
 
// Highcharts requires the y option to be set 
 
$.each(data, function (i, point) { 
 
    point.y = point.data; 
 
    point.color = parseFloat(point.data) > 3 ? '#ff0000' : '#00ff00'; 
 
}); 
 

 

 
var chart = new Highcharts.Chart({ 
 

 
    chart: { 
 
     renderTo: 'container', 
 
     type: 'pie' 
 
    }, 
 

 
    series: [{ 
 
     data: data 
 
    }] 
 

 
}); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.highcharts.com/highcharts.js"></script> 
 
<div id="container" style="height: 300px"></div>

Answer 2

мы можем установить highchart пользовательского цвета с помощью функции SetOption, которая, как

Highcharts.setOptions({ 
    colors: ['#F64A16', '#0ECDFD',] 
}); 

Он задает цвет моей круговой диаграммы.

Другое решение для динамического 3D цвета

На самом деле эта настройка для выбора темы Здесь

3 цвета устанавливает окрашивать переменную

var colors = Highcharts.getOptions().colors; 
     $.each(colors, function(i, color) { 
      colors[i] = { 
       linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 }, 
       stops: [ 
        [0, '#0ECDFD'], 
        [0.3, '#F64A16'], 
        [1, color] 
       ] 
      }; 

     }); 

& Присвоить непосредственно в серии

{ 
    type : 'column', 
    name : 'bug', 
    data : [], 
    color : colors,     
    pointWidth : 28, 
}