1

次のようなハイチャートチャートに渡すデータポイントの配列があります

mydata = [{
    x: 1,
    y: 3,
    nameList: ["name1", "name2"]
}, {
    x: 2,
    y: 4,
    nameList: ["name3", "name4"]
}]

次のようにチャートを作成します。

$("#chart").highcharts("StockChart", {
    series: [{
        data: mydata
    }, {
        data: yourdata
    }]
});

ここで、次のようにしようとしている共有ツールチップから nameList 配列にアクセスできるようにしたいと思います。

tooltip: {
    formatter: function() {
        var s = "";
        $.each(this.points, function(i, point) {
            s += point.point.nameList;
        });
        return s;
    },
    shared: true
}

しかし、 を使用して Firebug のポイント オブジェクトを調べるとconsole.log(point)、nameList エントリがどこにも見つからないようです。共有シリーズのツールチップでこの補助情報にアクセスするにはどうすればよいですか? すべての助けに感謝します。

4

2 に答える 2

2

ユーレカ！

デフォルトでは、Highcharts は系列のデータに対していくつかの異なるタイプの入力を受け入れます。

  1. 数値の配列。この場合、数値が解釈され、y 値と x 値が自動的に計算され、0 から開始して 1 ずつ増加するか、または plotOptions で指定された pointStart と pointInterval から計算されます。
  2. 2 つの値を持つ配列の配列。この場合、最初の値は x 値で、2 番目の値は y 値です。最初の値が文字列の場合、それがポイントの名前として適用され、上記の規則に従って x 値がインクリメントされます。
  3. 名前付きの値を持つオブジェクトの配列。この場合、以下に示すように、オブジェクトはポイント構成オブジェクトです。

ただし、タイプ 3 の扱いはタイプ 1 および 2 とは異なります。配列が turboThreshold 設定よりも大きい場合、タイプ 3 の配列はレンダリングされません。したがって、私の問題を解決するには、次のように turboThreshold 設定を上げる必要がありました。

...
plotOptions: {
    line: {
        turboThreshold: longestArray.length + 1
    }
},
...

チャートはlongestArrayデータを適切にレンダリングします。万歳！唯一の欠点は、「長い一連のデータのチェックとインデックス作成にコストがかかる」ため、はるかに長い配列のデータをレンダリングするのにかなりの時間がかかることです。このチェックを回避する方法や、このデータの処理を高速化する方法をご存知の方がいらっしゃいましたら、その方法を教えていただければ幸いです。

于 2013-06-24T21:39:06.603 に答える
1

ここで見ることができます：

tooltip: {
    formatter: function() {
        var s = "";
        console.log(this.points[0].point.nameList); // ["name1", "name2"] 
        $.each(this.points, function(i, point) {
            s += point.point.nameList;
        });
        return s;
    },
    shared: true
}
于 2013-06-18T19:20:31.753 に答える