小尺寸的Highcharts图

Question

我正在使用highcharts绘制图表。我正在寻找在图像中显示的高图。我正在删除x轴标签和y轴标签也减少高度和宽度但不像我附加的图像中的显示图表。

Answer 1

您可以调整容器尺寸，以获得所需的图表。进一步检查代码段中的注释以更好地理解

Highcharts.chart('container', {
  exporting: {
    buttons: {
      contextButton: {
        symbol: 'circle', //changes export button style
        symbolStrokeWidth: 1,
        symbolFill: '#bada55',
        symbolStroke: '#330033'
      }
    }
  },
  chart: {
    type: 'column',
    backgroundColor: 'rgb(183, 5, 32)', //back ground color
    margin: 0 //removes all margin
  },
  title: {
    text: '' //removes title of chart
  },

  xAxis: {
    categories: [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec'
    ],
    crosshair: true, //hover effect of column
    lineWidth: 0, //removes axis line
    gridLineWidth: 0, //removes charts background line
    lineColor: 'transparent',
    minorTickLength: 0, //removes minor axis ticks 
    tickLength: 0, //removes  axis ticks 
    title: {
      enabled: false
    },
    labels: {
      enabled: false
    },
  },
  yAxis: {
    min: 0,
    title: {
      text: ''
    },
    lineWidth: 0,
    gridLineWidth: 0,
    lineColor: 'transparent',
    minorTickLength: 0,
    tickLength: 0,
    labels: {
      enabled: false
    },
  },
  tooltip: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  legend: {
    enabled: false
  },
  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],
    color: '#f9eaed'

  }]
}, function(chart) { // on complete remder text

  chart.renderer.text(' <span style="font-size:23px">9.823</span><br>Members Online', 20, 50)
    .css({
      color: '#fff',
      fontSize: '12px'
    })
    .add();

});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 225px; height: 175px; margin: 0 auto"></div>