ハイチャートヒートマップのスタイル要件を満たそうとしています。現在、x軸にゾーンを適用することにより、ハイチャートパターンの塗りつぶしで「不完全な」データのスタイルを設定しています。
グラフは現在次のようになっています。右側のゾーンにパターン塗りつぶしが適用されています：不完全なゾーンを持つjsfiddleヒートマップ
色軸の構成：
colorAxis: {
dataClasses: [
{to: 3.33325, name: "<3.3", color: "#FFC4FF"},
{from: 3.33325, to: 5, name: "3.3 to 5.0", color: "#FF70FF"},
{from: 5, to: 6.66675, name: "5.0 to 6.7", color: "#D500F9"},
{from: 6.66675, to: 8.33325, name: "6.7 to 8.3", color: "#550075"},
{from: 8.33325, name: ">8.3", color: "#330046"},
]
}
シリーズ：
series: {
data: {
[
{x: 0, y: 0, z: 1},
{x: 0, y: 1, z: 2},
{x: 0, y: 2, z: 3},
{x: 1, y: 0, z: 4},
{x: 1, y: 1, z: 5},
{x: 1, y: 2, z: 6},
{x: 2, y: 0, z: 7}
{x: 2, y: 1, z: 8}
{x: 2, y: 2, z: 9}
]
}
zones: [
{value: 2},
{
color: {
pattern:
{
backgroundColor: "#CCCCCC",
height: 45,
path: {
d: "M-1,1 l2,-2 M0,45 l45,-45 M44,46 l2,-2",
stroke: "#FFFFFF",
strokeWidth: 3
}
width: 45
}
}
}
]
}
現在、パターンの塗りつぶしはすべて灰色ですが、背景色がdataClassesによって設定された色を尊重するように構成を設定する方法があるかどうかを調べようとしています。currentColorに設定しようとしましたが、colorAxisの色が親要素に適用されないため、機能しませんでした。可能であればclassNames / styledモードの使用を避けようとしています。何か提案はありますか？ありがとう
最も効率的な方法は、ゾーンをオプトアウトし、上書きtranslateColors方法によってポイントの色を生成する方法を変更することです。
(function(H) {
H.Series.prototype.translateColors = function() {
var series = this,
points = this.data.length ? this.data : this.points,
nullColor = this.options.nullColor,
colorAxis = this.colorAxis,
colorKey = this.colorKey;
points.forEach(function(point) {
var value = point[colorKey],
color;
color = point.options.color ||
(point.isNull ?
nullColor :
(colorAxis && typeof value !== 'undefined') ?
(
point.x < 2 ?
colorAxis.toColor(value, point) : {
pattern: {
backgroundColor: colorAxis.toColor(value, point),
height: 45,
width: 45,
path: {
d: "M-1,1 l2,-2 M0,45 l45,-45 M44,46 l2,-2",
stroke: '#FFFFFF',
strokeWidth: 3
}
}
}
) :
point.color || series.color);
if (color) {
point.color = color;
}
});
}
}(Highcharts));
ライブデモ： http ：//jsfiddle.net/BlackLabel/Lygwz16j/
ドキュメント： https ：//www.highcharts.com/docs/extending-highcharts/extending-highcharts
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加