6

アプリケーションで ExtJs/YUI チャートを使用しています。私が疑問に思っているのは、データに基づいてグラフの色を動的に変更することは可能ですか?

つまり、特定の行の 16 進数の色を保持するフィールドを含むストアがあります。棒グラフの棒の色を 16 進数値で動的に設定することはできますか?

4

4 に答える 4

1

このブログ投稿をご覧ください。チャート オブジェクトを構成するときは、その投稿で説明されているようにスタイル プロパティを含むシリーズ オブジェクトを渡して、色とその順序を定義します。

次に、ストア レコードをループして新しい配列を作成するか、store.query を使用してストアから色を取得することで、色を取得する必要があります。次に、この配列をプロパティとして渡します。

(...),
series: [style: { colors: arrayBuiltFromStore }],
(...)
于 2011-03-05T17:09:47.577 に答える
1

私が見つけたものから、あなたは

(...),
series: [style: {colors: arrayBuiltFromStore }],
(...)

円グラフ (または series.colors 属性を持つ別のグラフ) を作成している場合のメソッドで、うまく機能します。

series.colors をサポートしていない種類のグラフを使用している場合は、もう少し複雑になります。レンダラー メソッドを使用すると、かなりうまく機能することがわかりました。この方法の唯一の問題 (すぐにわかります) は、凡例の色が変更されないことです。これがストアから取り出せるかどうかを確認するには、さらに編集が必要です。

凡例の問題を理解したらお知らせください。これがお役に立てば幸いです。

注: 以下のスクリプトで使用されるすべての変数がスクリプトに入力されるわけではありません。

function myColorer(rec) {
var aFiller = new Array('#0000FF','#31CD31','#FFFF00','#FF0000');
    return aFiller[rec];
}
Ext.onReady(function() {
    var sDataStore = new Ext.data.JsonStore(sPathToDataStore);
    chart = new Ext.chart.Chart({
        renderTo: document.getElementById('test-graph'),
        width: 800,
        height: 600,
        animate: true,
        store: sDataStore,
        legend: {
            position: 'right',
            isVertical: true,
        },
        axes: [{
            type: 'Numeric',
            grid: true,
            position: 'left',
            fields: ['field1','field2','field3','field4'],
            title: 'Title Here',
            grid: {
                odd: {
                    opacity: 1,
                    fill: '#ddd',
                    stroke: '#bbb',
                    'stroke-width': 1
                }
            },
            minimum: 0,
            adjustMinimumByMajorUnit: 0
        }, {
            type: 'Category',
            position: 'bottom',
            fields: label1,
            title: sXAxisLabel,
            grid: true,
        }],
        series: [{
            renderer: function(sprite, record, curAttr, index, store) {
                var color = myColorer(index);
                return Ext.apply(curAttr, {
                    fill: color
                });
            },
            type: 'area',
            highlight: false,
            axis: 'left',
            xField: label1,
            yField: ['field1','field2','field3','field4'],
            style: {
                opacity: 0.93
            }
        }]
    });
});
于 2011-04-18T22:54:38.767 に答える
0

はい、レンダラーを使用して実行できます。次のコード例は、棒グラフの棒の色を変更します:

            series: {
                type: 'bar',
                xField: 'name',
                yField: 'value',
                label:{
                    field: 'value'
                },
                renderer: function(sprite, config, rendererData, index) {

                    var record = rendererData.store.getData().items[index];

                    return Ext.apply(rendererData, {
                        fillStyle: record.data.color,
                    });
                }
            }

ここで「色」は店舗モデルのフィールドです。ストアの対応するレコードに設定することで、バーごとに異なる色を設定できます。

于 2014-12-15T13:32:36.743 に答える
0

これを試して：

  1. 隠しフィールドを作成し、その値を色の値を含む store フィールドの値に割り当てます。
  2. 棒グラフをレンダリングするとき、棒の背景色を非表示フィールドの値に設定します。
于 2011-02-05T23:32:57.500 に答える