Question

在小屏幕上查看时，是否可以使柱形图响应？当我在小屏幕上（如移动设备或平板电脑的列栏）相互叠加时，我在plotOptions中将pointwidth设置为120属性。有没有办法渲染图表视图，以便在小尺寸屏幕上可以正常查看？

export  class AppComponent implements OnInit  {

  @ViewChild('container') chartContainer: any;

  ngOnInit() {
    console.log(this);
    this.createBarChart();

  }

createBarChart() {
  // Create the chart
  Highcharts.chart('bar-container', {
    chart: {
        type: 'column',

    },
    title: {
      text: null
    },

    xAxis: {
        type: 'category',
        labels: {
          style: {
              color: '#c5c5c5',
              fill: '#c5c5c5',
          },
     },

     title: {
         text: null
     }
    },
    yAxis: {
        title: {
            text: null
        }

    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {

          },
          column: {
              /* Here is the setting to limit the maximum column width. */
              pointWidth: 120,
              // maxPointWidth: 60,
              stacking: 'normal',

          },

  },

    tooltip: {
        pointFormat: '<b>{point.y:f} hours</b>',
        backgroundColor: '#000',
        style: {
          color: '#fff'
        }

    },
    credits: {
      enabled: false
  },

    'series': [
        {
            'name': 'Hours Per Period',
             color: {
              linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
              stops: [
                  [0, '#05e06f'],
                  [1, '#00b1f5']
              ]
             },
            'data': [
                {
                    'name': 'Week 1',
                    'y': 65,
                },
                {
                    'name': 'Week 2',
                    'y': 45,
                },
                {
                    'name': 'Week 3',
                    'y': 37,
                },
                {
                    'name': 'Week 4',
                    'y': 80,
                },
                {
                    'name': 'Week 5',
                    'y': 95,
                }
            ]
        },
    ],


    //     responsive {

    // },

  });
}
}

列栏之间需要一些空格..任何解决方案使用角度5，图表5

Answer 1

您可以使用responsive属性来添加条件并定义特定的图表选项：

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            plotOptions: {
                column: {
                    pointWidth: 20,
                    stacking: 'normal'
                }
            }
        }
    }]
}

实时演示：http://jsfiddle.net/BlackLabel/mr5qL2de/

API参考：https://api.highcharts.com/highcharts/responsive

为柱形图设置点宽时，Highchart响应问题

1 个答案: