Highcharts:如何按类别对柱形图进行分组
Highcharts: How to group column chart on category
我有 6 列和 3 个类别,我无法按类别对列进行分组。我可以从系列中调用类别吗?
我的目标是将 MACD 买入和 MACD 卖出并排分组在 MACD 类别中,将 SMA 7/35 买入和 SMA 7/35 卖出并列分组在 SMA 7/35 类别中,等等。你明白了。
对于以下格式,我很抱歉,我无法使用代码段功能。这是 JSFiddle:http://jsfiddle.net/worb5gyz/
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="Chart" style="width:100%; height:400px; margin-bottom: 5%;">
document.addEventListener('DOMContentLoaded', function () {
const chart = Highcharts.chart('Chart', {
chart: {
type: 'column'
},
credits: {
enabled: false
},
xAxis: {
categories: [
'MACD',
'SMA 7/35',
'SMA 50/200'
]},
yAxis: {
min: 0,
title: {
text: 'Signal'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
{type:'column',name: 'MACD BUY', data: [7] },
{type:'column',name: 'MACD SELL', data: [6 ] },
{type:'column',name: 'SMA 7/35 BUY', data: [13] },
{type:'column',name: 'SMA 7/35 SELL', data: [4] },
{type:'column',name: 'SMA 50/200 BUY', data: [6] },
{type:'column',name: 'SMA 50/200 SELL', data: [1]}
]
});
});
编辑:在进行更多搜索后尝试了不同的设置,但没有用。
series: [{
"data": [{"name": 'MACD BUY', x:0, data: [<?php echo json_encode($macd_M_BUY);?>] }] },
{"data": [{"name": 'MACD SELL', x:0, data: [<?php echo json_encode($macd_M_SELL);?>] }] },
{"data": [{"name": 'SMA 7/35 BUY', x:1, data: [<?php echo json_encode($sma_s_M_BUY);?>] }] },
{"data": [{"name": 'SMA 7/35 SELL', x:1, data: [<?php echo json_encode($sma_s_M_SELL);?>] }] },
{"data": [{"name": 'SMA 50/200 BUY', x:2, data: [<?php echo json_encode($sma_l_M_BUY);?>] }] },
{"data": [{"name": 'SMA 50/200 SELL', x:2, data: [<?php echo json_encode($sma_l_M_SELL);?>] }] }
]
```
为系列配置中的每个数据点添加一个 x 位置:
series: [{
type: 'column',
name: 'MACD BUY',
data: [{x: 0, y: 7}]
},
{
type: 'column',
name: 'MACD SELL',
data: [{x: 0, y: 6}]
},
{
type: 'column',
name: 'SMA 7/35 BUY',
data: [{x: 1, y: 13}]
},
{
type: 'column',
name: 'SMA 7/35 SELL',
data: [{x: 1, y: 4}]
},
{
type: 'column',
name: 'SMA 50/200 BUY',
data: [{x: 2, y: 6}]
},
{
type: 'column',
name: 'SMA 50/200 SELL',
data: [{x: 2, y: 1}]
}
]
我有 6 列和 3 个类别,我无法按类别对列进行分组。我可以从系列中调用类别吗?
我的目标是将 MACD 买入和 MACD 卖出并排分组在 MACD 类别中,将 SMA 7/35 买入和 SMA 7/35 卖出并列分组在 SMA 7/35 类别中,等等。你明白了。
对于以下格式,我很抱歉,我无法使用代码段功能。这是 JSFiddle:http://jsfiddle.net/worb5gyz/
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="Chart" style="width:100%; height:400px; margin-bottom: 5%;">
document.addEventListener('DOMContentLoaded', function () {
const chart = Highcharts.chart('Chart', {
chart: {
type: 'column'
},
credits: {
enabled: false
},
xAxis: {
categories: [
'MACD',
'SMA 7/35',
'SMA 50/200'
]},
yAxis: {
min: 0,
title: {
text: 'Signal'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
{type:'column',name: 'MACD BUY', data: [7] },
{type:'column',name: 'MACD SELL', data: [6 ] },
{type:'column',name: 'SMA 7/35 BUY', data: [13] },
{type:'column',name: 'SMA 7/35 SELL', data: [4] },
{type:'column',name: 'SMA 50/200 BUY', data: [6] },
{type:'column',name: 'SMA 50/200 SELL', data: [1]}
]
});
});
编辑:在进行更多搜索后尝试了不同的设置,但没有用。
series: [{
"data": [{"name": 'MACD BUY', x:0, data: [<?php echo json_encode($macd_M_BUY);?>] }] },
{"data": [{"name": 'MACD SELL', x:0, data: [<?php echo json_encode($macd_M_SELL);?>] }] },
{"data": [{"name": 'SMA 7/35 BUY', x:1, data: [<?php echo json_encode($sma_s_M_BUY);?>] }] },
{"data": [{"name": 'SMA 7/35 SELL', x:1, data: [<?php echo json_encode($sma_s_M_SELL);?>] }] },
{"data": [{"name": 'SMA 50/200 BUY', x:2, data: [<?php echo json_encode($sma_l_M_BUY);?>] }] },
{"data": [{"name": 'SMA 50/200 SELL', x:2, data: [<?php echo json_encode($sma_l_M_SELL);?>] }] }
]
```
为系列配置中的每个数据点添加一个 x 位置:
series: [{
type: 'column',
name: 'MACD BUY',
data: [{x: 0, y: 7}]
},
{
type: 'column',
name: 'MACD SELL',
data: [{x: 0, y: 6}]
},
{
type: 'column',
name: 'SMA 7/35 BUY',
data: [{x: 1, y: 13}]
},
{
type: 'column',
name: 'SMA 7/35 SELL',
data: [{x: 1, y: 4}]
},
{
type: 'column',
name: 'SMA 50/200 BUY',
data: [{x: 2, y: 6}]
},
{
type: 'column',
name: 'SMA 50/200 SELL',
data: [{x: 2, y: 1}]
}
]