时间戳

首页 > 解决方案 > Highcharts：如何按类别对柱形图进行分组

javascript - Highcharts：如何按类别对柱形图进行分组

问题描述

我有 6 列和 3 个类别，我无法在类别上创建列组。我可以从系列中调用类别吗？

我的目标是将 MACD BUY 和 MACD SELL 并排分组在 MACD 类别中，SMA 7/35 BUY 和 SMA 7/35 SELL 在 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);?>] }] }
                          ]
    ```

标签： javascripthighcharts

解决方案

为系列配置中的每个数据点添加一个 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}]
  }
]

演示：http: //jsfiddle.net/BlackLabel/qhv4xoLf/

推荐阅读