1

1 つのシリーズのデータ​​ ポイントごとに条件付きで棒グラフの色を変更する必要があります。シリーズの 1 つのデータ ポイントは、他の 4 つのデータ ポイントとは異なる色のしきい値を持つ必要があります。

この SO 投稿にある提案を実装しようとしましたが、オブジェクトに get メソッドがないという JS エラーが発生しています。

これは私が扱っているデータです： 系列棒グラフ

シリーズ 2 にはさまざまな色が必要です。これらのシリーズを作成するためのデータはこちら

  1. しきい値データに [ [2,1]、[4,2]、[6,3]、[3,4]、[8, 5] が含まれる
  2. 結果データには [ [6,1]、[6,2]、[4,3]、[6,4]、[6, 5] ] が含まれます

結果データは青い棒グラフの線を参照し、しきい値データはオレンジ色の線を参照します。

結果の要素 1 から要素 4 については、次の結果が必要です。

内側の配列の最初の要素が >= 0 かつ <= 4 の場合、内側の配列の最初の要素が >=5 かつ <= 7 の場合、バーは赤になります。内側の配列が >=8 かつ <= 11 の場合、バーは緑色になります。

結果の要素 5 については、内側の配列の最初の要素が >= 0 かつ <= 5 の場合、内側の配列の最初の要素が >= 6 かつ <= 11 の場合、バーは赤になります。緑でなければなりません。

例として、if resultsSeries[0][0] === 4then バーの色を赤にする必要があります。

この時点で、チャートが生成された後、何らかの形でチャートを反復処理してそのように変更しても問題ありませんが、その方法はわかりません。jqPlotその要素を調べてキャンバスを取得しましたが、その中のアイテムにどのように影響しているか、またはそれらに名前が付けられていることをよく理解していません.

jsFiddle.net へのリンク

次のエラーが発生します。

Uncaught TypeError: Object [object Object] has no method 'get'
jqplot.barRenderer.js:280
$.jqplot.BarRenderer.draw jqplot.barRenderer.js:280
Series.draw jquery.jqplot.js:1065
drawSeries jquery.jqplot.js:2735
draw jquery.jqplot.js:2249
$.jqplot jquery.jqplot.js:164
(anonymous function) jqplot_example.html:71
n jquery.min.js:2
o.fireWith jquery.min.js:2
e.extend.ready jquery.min.js:2
c.addEventListener.C
4

2 に答える 2

1

オーバーライドしたい場合は、すべてのメソッドを実装する必要があります。getこれはソース コードからのものであり、メソッドを実装する必要がありsetColorsます。

function (colors) {
    colors = colors || $.jqplot.config.defaultColors;
    var idx = 0;

    this.next = function () { 
        if (idx < colors.length) {
            return colors[idx++];
        }
        else {
            idx = 0;
            return colors[idx++];
        }
    };

    this.previous = function () { 
        if (idx > 0) {
            return colors[idx--];
        }
        else {
            idx = colors.length-1;
            return colors[idx];
        }
    };

    // get a color by index without advancing pointer.
    this.get = function(i) {
        var idx = i - colors.length * Math.floor(i/colors.length);
        return colors[idx];
    };

    this.setColors = function(c) {
        colors = c;
    };

    this.reset = function() {
        idx = 0;
    };

    this.getIndex = function() {
        return idx;
    };

    this.setIndex = function(index) {
        idx = index;
    };
}
于 2013-08-19T18:37:24.833 に答える
0

seriesColors: 値 < しきい値 ? ["#ff0000"] : ["#00ff00"];

于 2014-09-19T16:18:48.257 に答える