Question

如何在海图中创建垂直合并的堆积条形图。

组填充和点填充在Highchart中不起作用。

预期：

实际：

https://jsfiddle.net/sathishkumar_v/3woxcskg/

Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    title: {
        text: null
    },
    exporting:{
    enabled: false
    },
    legend: {
     align: 'right',
    },
    xAxis: {
        categories: [
           '6:00AM',
           '7:00AM',
           '8:00AM',
           '9:00AM',
           '10:00AM',
           '11:00AM',
           '12:00AM',
           '1:00PM',
           '2:00PM',
           '3:00PM',
           '4:00PM',
           '5:00PM',
           '6:00PM',
           '7:00PM',
           '8:00PM',
           '9:00PM',
           '10:00PM' 
        ],
       plotBands: [
       {
            from: 0,
            to: 2,
            color: '#D4E2F2'
        },
        {
            from: 2,
            to: 5,
            color: '#EFC5CA'
        },
        {
            from: 14,
            to: 16,
            color: '#D4E2F2'
        },
        {
            from: 11,
            to: 14,
            color: '#EFC5CA'
        },
        ]
    },
    yAxis: [
    {
            gridLineDashStyle: 'longdash',
            // tickPositions: [0, 100, 200, 300, 400, 500, 600, 700, 800],
        title: {
            text: 'TRIPS'
        }
    },
     {
            gridLineDashStyle: 'longdash',
            // tickPositions: [0, 100, 200, 300, 400, 500, 600, 700, 800],
        title: {
            text: 'DEMAND(PAX)'
        },
         opposite: true
    }
    ],
    tooltip: {
        shared: true,
        valueSuffix: ' units'
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        areaspline: {
            fillOpacity: 0.5
        }
    },
    series: [{
        name: 'Planned Trips',
        yAxis: 1,
        data: [0, 35, 80, 120, 230, 210, 175, 155, 130, 120, 150, 100, 175, 160, 175, 140, 180],
        color: '#304894',
    },
    {
        name: 'Actual Trips',
        ///yAxis: 2,
        data: [0, 145, 165, 180, 190, 225, 195, 175, 150, 190, 200, 230, 175, 90, 115, 140, 120],
        color: '#6FD1F6',
    },
    {
    name: 'Actual Demand',
    type: 'column',
    stacking: 'normal',
    data: [0, 25, 35, 80, 130, 150, 115, 100, 80, 70, 30, 80,  100, 75, 60, 75, 40],
    color: '#6FD1F6',
    pointWidth: 10
  },  {
  type: 'column',
  name: 'Planned Demand',
    stacking: 'normal',
    data: [3, 35, 11, 11, 12, 14, 15, 21, 25, 25, 23, 21, 15, 13, 12, 5, 5],
    color: '#304894',
    pointWidth: 10
  }]
});

我将https://github.com/bellstrand/highcharts-border-radius用于边界半径的顶部-左侧和右侧

Answer 1

您可以使用wrapper function来做到这一点，就像这样：

(function (H) {
  H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function (proceed) {
  console.log(this)
  let borderRadius = this.points[0].pointWidth / 2;
  this.options.borderRadius = borderRadius;
    $.each(this.points, function (i,point) {
      point.shapeArgs.y -=  borderRadius; //move the point down by borderRadius pixels
      point.shapeArgs.height +=  borderRadius * 2; //add borderRadius pixels to the total height of a point (to cover the gap)
    });
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  });
}(Highcharts));

将条形图初始宽度的一半作为边界半径，并覆盖它们将要留下的间隙。

(function (H) {
  H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function (proceed) {
  let borderRadius = this.points[0].pointWidth / 2;
  this.options.borderRadius = borderRadius;
    $.each(this.points, function (i,point) {
      point.shapeArgs.y -=  borderRadius; //move the point down by borderRadius pixels
      point.shapeArgs.height +=  borderRadius * 2; //add borderRadius pixels to the total height of a point (to cover the gap)
    });
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  });
}(Highcharts));

Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    title: {
        text: null
    },
    exporting:{
    enabled: false
    },
    legend: {
     align: 'right',
    },
    xAxis: {
        categories: [
           '6:00AM',
           '7:00AM',
           '8:00AM',
           '9:00AM',
           '10:00AM',
           '11:00AM',
           '12:00AM',
           '1:00PM',
           '2:00PM',
           '3:00PM',
           '4:00PM',
           '5:00PM',
           '6:00PM',
           '7:00PM',
           '8:00PM',
           '9:00PM',
           '10:00PM' 
        ],
       plotBands: [
       {
            from: 0,
            to: 2,
            color: '#D4E2F2'
        },
        {
            from: 2,
            to: 5,
            color: '#EFC5CA'
        },
        {
            from: 14,
            to: 16,
            color: '#D4E2F2'
        },
        {
            from: 11,
            to: 14,
            color: '#EFC5CA'
        },
        ]
    },
    yAxis: [
    {
    		gridLineDashStyle: 'longdash',
   			// tickPositions: [0, 100, 200, 300, 400, 500, 600, 700, 800],
        title: {
            text: 'TRIPS'
        }
    },
     {
     		gridLineDashStyle: 'longdash',
   			// tickPositions: [0, 100, 200, 300, 400, 500, 600, 700, 800],
        title: {
            text: 'DEMAND(PAX)'
        },
         opposite: true
    }
    ],
    tooltip: {
        shared: true,
        valueSuffix: ' units'
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        areaspline: {
            fillOpacity: 0.5
        }
    },
    series: [{
        name: 'Planned Trips',
        yAxis: 1,
        data: [0, 35, 80, 120, 230, 210, 175, 155, 130, 120, 150, 100, 175, 160, 175, 140, 180],
        color: '#304894',
    },
    {
        name: 'Actual Trips',
        ///yAxis: 2,
        data: [0, 145, 165, 180, 190, 225, 195, 175, 150, 190, 200, 230, 175, 90, 115, 140, 120],
        color: '#6FD1F6',
    },
    {
    name: 'Actual Demand',
    type: 'column',
    stacking: 'normal',
    data: [0, 25, 35, 80, 130, 150, 115, 100, 80, 70, 30, 80,  100, 75, 60, 75, 40],
    color: '#6FD1F6',
    pointWidth: 10
  },  {
  type: 'column',
  name: 'Planned Demand',
    stacking: 'normal',
    data: [3, 35, 11, 11, 12, 14, 15, 21, 25, 25, 23, 21, 15, 13, 12, 5, 5],
    color: '#304894',
    pointWidth: 10
  }]
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

工作示例： https://jsfiddle.net/ewolden/3woxcskg/19/

如果页面中有多个图表，但只希望影响一个图表，则可以为此设置一个自定义标志。然后，您需要：

在图表配置中：

chart: {
  customFlag: 'wrap',
  ...
},

然后在包装器中

(function (H) {
  H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function (proceed) {
  console.log(this)
  if(this.chart.options.chart.customFlag == 'wrap') {
    let borderRadius = this.points[0].pointWidth / 2;
    this.options.borderRadius = borderRadius;
      $.each(this.points, function (i,point) {
        point.shapeArgs.y -=  borderRadius; //move the point down by borderRadius pixels
        point.shapeArgs.height +=  borderRadius * 2; //add borderRadius pixels to the total height of a point (to cover the gap)
      });
   }
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  });
}(Highcharts));

(function (H) {
  H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function (proceed) {
  console.log(this)
  if(this.chart.options.chart.customFlag == 'wrap') {
    let borderRadius = this.points[0].pointWidth / 2;
    this.options.borderRadius = borderRadius;
      $.each(this.points, function (i,point) {
        point.shapeArgs.y -=  borderRadius; //move the point down by borderRadius pixels
        point.shapeArgs.height +=  borderRadius * 2; //add borderRadius pixels to the total height of a point (to cover the gap)
      });
   }
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  });
}(Highcharts));

Highcharts.chart('container', {
    chart: {
        type: 'spline',
        customFlag: 'wrap'
    },
    title: {
        text: null
    },
    exporting:{
    enabled: false
    },
    legend: {
     align: 'right',
    },
    xAxis: {
        categories: [
           '6:00AM',
           '7:00AM',
           '8:00AM',
           '9:00AM',
           '10:00AM',
           '11:00AM',
           '12:00AM',
           '1:00PM',
           '2:00PM',
           '3:00PM',
           '4:00PM',
           '5:00PM',
           '6:00PM',
           '7:00PM',
           '8:00PM',
           '9:00PM',
           '10:00PM' 
        ],
       plotBands: [
       {
            from: 0,
            to: 2,
            color: '#D4E2F2'
        },
        {
            from: 2,
            to: 5,
            color: '#EFC5CA'
        },
        {
            from: 14,
            to: 16,
            color: '#D4E2F2'
        },
        {
            from: 11,
            to: 14,
            color: '#EFC5CA'
        },
        ]
    },
    yAxis: [
    {
    		gridLineDashStyle: 'longdash',
   			// tickPositions: [0, 100, 200, 300, 400, 500, 600, 700, 800],
        title: {
            text: 'TRIPS'
        }
    },
     {
     		gridLineDashStyle: 'longdash',
   			// tickPositions: [0, 100, 200, 300, 400, 500, 600, 700, 800],
        title: {
            text: 'DEMAND(PAX)'
        },
         opposite: true
    }
    ],
    tooltip: {
        shared: true,
        valueSuffix: ' units'
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        areaspline: {
            fillOpacity: 0.5
        }
    },
    series: [{
        name: 'Planned Trips',
        yAxis: 1,
        data: [0, 35, 80, 120, 230, 210, 175, 155, 130, 120, 150, 100, 175, 160, 175, 140, 180],
        color: '#304894',
    },
    {
        name: 'Actual Trips',
        ///yAxis: 2,
        data: [0, 145, 165, 180, 190, 225, 195, 175, 150, 190, 200, 230, 175, 90, 115, 140, 120],
        color: '#6FD1F6',
    },
    {
    name: 'Actual Demand',
    type: 'column',
    stacking: 'normal',
    data: [0, 25, 35, 80, 130, 150, 115, 100, 80, 70, 30, 80,  100, 75, 60, 75, 40],
    color: '#6FD1F6',
    pointWidth: 10
  },  {
  type: 'column',
  name: 'Planned Demand',
    stacking: 'normal',
    data: [3, 35, 11, 11, 12, 14, 15, 21, 25, 25, 23, 21, 15, 13, 12, 5, 5],
    color: '#304894',
    pointWidth: 10
  }]
});



Highcharts.chart('container2', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Rainfall (mm)'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Tokyo',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

    }, {
        name: 'New York',
        data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

    }, {
        name: 'London',
        data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

    }, {
        name: 'Berlin',
        data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

    }]
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div id="container2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

工作示例： https://jsfiddle.net/ewolden/3woxcskg/24/

如何在Highchart中创建垂直合并的堆积条形图

1 个答案: