Highcharts.jsで作成された複数のシリーズの縦棒グラフがあります。グラフには、傾向に基づいた予測値のゾーンがあります。これらを実際のライブデータと視覚的に区別したいと思います。
縦棒グラフに、実際のデータを単色(テーマのデフォルトの色を使用-色オプションは提供されていません)で表示し、同じ色を使用して投影値の対角パターンを表示したいと思います。
私は次のようにPHPからのオプションをJSONとして渡します:
$h_series['zoneAxis'] = 'x';
$h_series['zones'] = array(
array('value' => $zone_start),
array(
'color' => array(
'pattern' => array(
'path' => array(
'd' => 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
'strokeWidth' => 2
),
'width' => 10,
'height' => 10,
//'color' => '#feafea'
)
)
)
);
ご覧のとおりcolor
、シリーズで元の色を維持したいので、ゾーンのオプションは指定しません。しかし、color
オプションを削除すると、黒いパターンが表示されます。
私はこの例を見ましたが、これは私が達成したいことですが、色は手動で指定されています。すべてがデフォルトの色を使用するように、色を指定したくありません。
私はスプライングラフに似た何かをしています:
$total_series['zoneAxis'] = 'x';
$total_series['zones'] = array(
array('value' => $zone_start),
array('dashStyle' => 'dot')
);
どういうわけかこれは完璧に機能し、スプラインの色を保持し、ポイントが指定されたゾーン内にあるときに実線から点線に変更されました。これは私が達成したいことです。ゾーン内にある場合は、ソリッド列をストライプ列に変更するだけです。
例が欲しい人のためにフィドルを作りました。
Highcharts.chart('container', {
xAxis: {
plotBands: [{
color: 'rgba(68, 170, 213, 0.1)',
from: 2.5,
to: 4.5
}]
},
series: [{
type: 'column',
data: [29.9, 71.5, 106.4, 129.2, 144.0],
zoneAxis: 'x',
zones: [{
value: 3
}, {
color: {
pattern: {
path: {
d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
strokeWidth: 3
},
width: 10,
height: 10
}
}
}]
}, {
type: 'column',
data: [41.2, 25.6, 30.0, 101.6, 175.2],
zoneAxis: 'x',
zones: [{
value: 3
}, {
color: {
pattern: {
path: {
d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
strokeWidth: 3
},
width: 10,
height: 10
}
}
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>
<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>
ゾーンでは機能していないようです。
パターンの色をデフォルトのシリーズの色として設定することによってのみ、それを実現できます。
zones: [{
value: 3
}, {
color: {
pattern: {
path: {
d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
strokeWidth: 3
},
width: 10,
height: 10,
color: Highcharts.defaultOptions.colors[0]
}
}
}]
デモ:
または、chart.events.load
コールバックを使用して自動的に設定します。
chart: {
events: {
load: function() {
var chart = this;
chart.series.forEach(function(series) {
series.points.forEach(function(point) {
if (typeof point.color !== 'string') {
point.update({
color: {
pattern: {
path: {
d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
strokeWidth: 3
},
width: 10,
height: 10,
color: series.color
}
}
}, false)
}
});
});
chart.redraw();
}
}
}
デモ:
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加