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')
);
어떻게 든 완벽하게 작동하고 스플라인의 색상을 유지했으며 점이 지정된 영역 내에있을 때 실선에서 점선으로 변경되었습니다. 이것이 제가 달성하고자하는 것입니다. 영역 내에있는 경우 단색 열을 스트라이프 열로 변경하기 만하면됩니다.
나는 예제를 원하는 사람들을 위해 Fiddle 을 만들었습니다 .
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] 삭제
몇 마디 만하겠습니다