在Highcharts列图中添加第二个和第三个系列之间的间隙,并显示四个系列

Question

我有一个Highcharts列图,显示了四个系列.

我希望第一和第二系列相互接触(两个蓝色),然后有一个小间隙,然后系列三和四相互接触(橙色的).可以这样做吗？

我自己没有找到办法,也无法在这里找到示例或在Google上搜索.有人能提供任何建议吗？

$(function() {
  var chart;
  var defaultTitle = "CT doses";
  var protocolNames = ['Abdomen', 'Chest', 'Sinus'];
  $(document).ready(function() {
    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        type: 'column',
        events: {
          drilldown: function(e) {
            parentSeriesIndex = e.point.series.index;
            parentSeriesName = e.point.series.name;
            chart.setTitle({
              text: ''
            });
            chart.yAxis[0].setTitle({
              text: 'Number'
            });
            if (parentSeriesName.indexOf('DLP') != -1) {
              chart.xAxis[0].setTitle({
                text: 'DLP range (mGy.cm)'
              });
            }
            if (parentSeriesName.indexOf('CTDI') != -1) {
              chart.xAxis[1].setTitle({
                text: 'CTDI range (mGy)'
              });
            }
            chart.xAxis[0].setCategories([], true);
            chart.tooltip.options.formatter = function(args) {
              if (this.series.name.indexOf('DLP') != -1) {
                returnValue = this.y.toFixed(0) + ', DLP series' + ', ' + this.x;
              } else {
                returnValue = this.y.toFixed(0) + ', CTDI series' + ', ' + this.x;
              }
              return returnValue;
            };
            chart.yAxis[1].update({
              labels: {
                enabled: false
              },
              title: {
                text: null
              }
            });
          },
          drillup: function(e) {
            chart.setTitle({
              text: defaultTitle
            }, {
              text: ''
            });
            chart.yAxis[0].setTitle({
              text: 'DLP (mGy.cm)'
            });
            chart.yAxis[1].setTitle({
              text: 'CTDIvol (mGy)'
            });
            chart.xAxis[0].setTitle({
              text: ''
            });
            chart.xAxis[1].setTitle({
              text: ''
            });
            chart.xAxis[0].setCategories(protocolNames, true);
            chart.xAxis[0].update({
              labels: {
                rotation: 90
              }
            });
            chart.yAxis[1].update({
              labels: {
                enabled: true
              },
              title: {
                text: 'CTDIvol (mGy)'
              }
            });
          }
        }
      },
      title: {
        text: 'CT doses'
      },
      xAxis: [{
        title: {
          useHTML: true
        },
        type: "category",
        labels: {
          useHTML: true,
          rotation: 90
        }
      }, {
        title: {
          useHTML: true
        },
        type: "category",
        opposite: true,
        labels: {
          useHTML: true,
          rotation: 90
        }
      }],
      yAxis: [{
        min: 0,
        title: {
          text: 'DLP (mGy.cm)'
        }
      }, {
        title: {
          text: 'CTDIvol (mGy)'
        },
        opposite: true
      }],
      legend: {
        align: 'center',
        verticalAlign: 'top',
        floating: true,
        borderWidth: 0,
        y: 70
      },
      tooltip: {},
      plotOptions: {
        column: {
          borderWidth: 0,
          groupPadding: 0.2,
          pointPadding: 0
        }
      },
      series: [{
        name: 'Mean DLP',
        color: '#2b8cbe',
        data: [{
          name: 'Abdomen',
          y: 150,
          drilldown: 'AbdomenDLP'
        }, {
          name: 'Chest',
          y: 73,
          drilldown: 'ChestDLP'
        }, {
          name: 'Sinus',
          y: 20,
          drilldown: 'SinusDLP'
        }],
        tooltip: {
          valueSuffix: ' mGy.cm'
        }
      }, {
        name: 'Median DLP',
        color: '#7bccc4',
        data: [{
          name: 'Abdomen',
          y: 140,
          drilldown: 'AbdomenDLP'
        }, {
          name: 'Chest',
          y: 63,
          drilldown: 'ChestDLP'
        }, {
          name: 'Sinus',
          y: 15,
          drilldown: 'SinusDLP'
        }],
        tooltip: {
          valueSuffix: ' mGy.cm'
        }
      }, {
        name: 'Mean CTDI',
        color: '#d7301f',
        data: [{
          name: 'Abdomen',
          y: 57.2,
          drilldown: 'AbdomenCTDI'
        }, {
          name: 'Chest',
          y: 25.8,
          drilldown: 'ChestCTDI'
        }, {
          name: 'Sinus',
          y: 43.4,
          drilldown: 'SinusCTDI'
        }],
        tooltip: {
          valueSuffix: ' mGy'
        },
        yAxis: 1
      }, {
        name: 'Median CTDI',
        color: '#fdcc8a',
        data: [{
          name: 'Abdomen',
          y: 52.2,
          drilldown: 'AbdomenCTDI'
        }, {
          name: 'Chest',
          y: 20.8,
          drilldown: 'ChestCTDI'
        }, {
          name: 'Sinus',
          y: 38.4,
          drilldown: 'SinusCTDI'
        }],
        tooltip: {
          valueSuffix: ' mGy'
        },
        yAxis: 1
      }],
      drilldown: {
        series: [{
          name: 'Abdomen DLP',
          id: 'AbdomenDLP',
          data: [
            ['up to 150', 4],
            ['up to 200', 2],
            ['up to 250', 1],
            ['up to 300', 2],
            ['up to 350', 1]
          ]
        }, {
          name: 'Chest DLP',
          id: 'ChestDLP',
          data: [
            ['up to 100', 40],
            ['up to 110', 21],
            ['up to 120', 24],
            ['up to 130', 32],
            ['up to 140', 64]
          ]
        }, {
          name: 'Sinus DLP',
          id: 'SinusDLP',
          data: [
            ['up to 130', 4],
            ['up to 140', 2],
            ['up to 150', 6],
            ['up to 160', 7],
            ['up to 170', 9]
          ]
        }, {
          name: 'Abdomen CTDI',
          id: 'AbdomenCTDI',
          xAxis: 1,
          data: [
            ['up to 20', 4],
            ['up to 22', 9],
            ['up to 24', 12],
            ['up to 26', 8],
            ['up to 28', 2]
          ]
        }, {
          name: 'Chest CTDI',
          id: 'ChestCTDI',
          xAxis: 1,
          data: [
            ['up to 10', 4],
            ['up to 12', 9],
            ['up to 14', 12],
            ['up to 16', 8],
            ['up to 18', 2]
          ]
        }, {
          name: 'Sinus CTDI',
          id: 'SinusCTDI',
          xAxis: 1,
          data: [
            ['up to 14', 4],
            ['up to 16', 9],
            ['up to 18', 12],
            ['up to 20', 8],
            ['up to 22', 2]
          ]
        }]
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://highslide-software.github.io/export-csv/export-csv.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

Answer 1

您需要使用pointPlacement带有数值的选项。例如： http: //jsfiddle.net/9phfzewj/34/

玩弄价值观，在我的例子中是-0.1左派和0.1右派。只要series.grouping启用，pointPlacement就指之前的系列位置。