7

ハイチャートを使用して、ウェブサイトにいくつかのグラフをレンダリングしています。ajax を介して新しいデータを要求したため、チャートからすべてのシリーズを削除し、チャートに新しいシリーズを追加する必要がある場合があります。

私は現在、このようにしています：

var chart = $('#container').highcharts();
while(chart.series.length) {
    chart.series[0].remove();
}

chart.addSeries({
    data: [144.0, 176.0, 29.9, 71.5, 106.4, 129.2, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
});
chart.addSeries({
    data: [129.2, 106.4, 135.6, 95.6, 54.4, 148.5, 144.0, 176.0, 29.9, 71.5, 216.4, 194.1]
});
chart.addSeries({
    data: [106.4, 129.2, 135.6, 148.5, 144.0, 176.0, 29.9, 71.5, 194.1, 95.6, 54.4, 216.4]
});

これは、この fiddleで確認できます。

しかし、私の問題は、新しいシリーズが最初のシリーズとはまったく異なる色になることです.

シリーズの数が変わる可能性があるため、単純にデータを置き換えることはできません。そのため、すべてのシリーズを削除して新しいシリーズを追加する必要があります。

新しいシリーズが置き換えられたものと同じようにスタイルされていることをアーカイブするにはどうすればよいですか? （私のフィドルでは、新しいシリーズにはライトブルー、ダークブルー、および3番目の色が必要です。）

テストケース

直面している問題を明確にするために、いくつかのテストケースを作成しました。上のグラフは本来あるべき姿で、下のグラフは実際の姿です。同じであってほしい！

  1. 2 つのシリーズを削除して 2 つのシリーズを追加する
  2. 2 つのシリーズを削除し、3 つのシリーズを追加します
  3. 3 つのシリーズを削除して 2 つのシリーズを追加

解決策は、これらすべてのケースで機能する必要があります!

4

4 に答える 4

16

GitHub のプル リクエストで解決策を見つけました ( https://github.com/highslide-software/highcharts.com/pull/203 )。

シリーズを削除した後、ハイチャートのカラーカウンターをリセットするだけです。シンボルのカウンターもあります。

更新: バージョン 4.0.3 以降から、カウンターの名前が変更されました。

var chart = $('#container').highcharts();
while(chart.series.length) {
    chart.series[0].remove();
}

chart.colorCounter = 0;
chart.symbolCounter = 0;

chart.addSeries({
     data: [144.0, 176.0, 29.9, 71.5, 106.4, 129.2, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
});
chart.addSeries({
    data: [129.2, 106.4, 135.6, 95.6, 54.4, 148.5, 144.0, 176.0, 29.9, 71.5, 216.4, 194.1]
});
chart.addSeries({
    data: [106.4, 129.2, 135.6, 148.5, 144.0, 176.0, 29.9, 71.5, 194.1, 95.6, 54.4, 216.4]
});

実際の例: http://jsfiddle.net/juuQs/18/

(バージョン 4.0.3 より前では、chart.counters.color = 0 および chart.counters.symbol = 0 を使用する必要があります)

于 2013-08-28T14:42:00.287 に答える
1

色のオプションを使用します。

$('#container').highcharts({
    colors: ['#2f7ed8', 
        '#0d233a', 
        '#8bbc21'],
    series: …

実際の例: http://jsfiddle.net/juuQs/3/

または、次のように、シリーズごとに静的な色を使用します。

chart.addSeries({
        data: [144.0, 176.0, 29.9, 71.5, 106.4, 129.2, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        color: '#2f7ed8'
    });
于 2013-07-23T06:09:56.787 に答える