1

これは私のデータモデルです:

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
    })
});

公式のハイチャート デモは次のとおりです: http://www.highcharts.com/demo/pie-gradient
データをループし、色を読み取り、カラー配列を作成し、チャートを描画するときにこの配列を使用します。
しかし、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
            ]
        };
    });
4

1 に答える 1

0

上記の解決策は、グローバルなデフォルトで色を設定します。グラフが 1 つしかない場合は問題ありませんが、複数ある場合は、色がすべてのグラフに適用されるため、問題になる可能性があります。

ローカル データ配列だけで色を再マッピングすることにより、個々のチャート レベルでこれを色付けできます。これが私が円グラフに対して行うことです。

chartData は、次のようなデータの配列です。

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

私の JavaScript コードでは、サーバーから取得され、Highcharts オブジェクトの series.data 要素に適用されます。

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」は、チャート データ入力を受け取り、「color」要素を探して、同じ色に基づく Highcharts グラデーションに置き換えます。

16 進数または RGB 値を使用する必要があることに注意してください。「緑」または「青」という単語として定義された色では機能しません。

于 2015-03-09T02:43:04.000 に答える