Проблемы с высокой диаграммой, реагирующей, когда для столбчатой ​​диаграммы установлена ​​пропускная способность - PullRequest
Новая
       12

Проблемы с высокой диаграммой, реагирующей, когда для столбчатой ​​диаграммы установлена ​​пропускная способность

0 голосов
/ 23 января 2019

Можно ли сделать диаграмму столбца отзывчивой при просмотре на маленьком экране?Я установил свойство pointwidth в 120 в plotOptions, когда я смотрю его на маленьком экране, например, столбцы столбцов мобильных устройств или планшетов располагаются один над другим.Есть ли способ визуализировать вид диаграммы, чтобы на экране небольшого размера он мог быть просмотрен правильно?

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

1 Ответ

0 голосов
/ 23 января 2019

Вы можете использовать свойство 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

...