javascript - Highcharts map 的最大宽度或最大高度

Question

我正在尝试使用 highcharts 设置世界地图的 maxWidth，但它不会改变大小。

我已经尝试过这些:

responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
...

按照建议here和 demo .

chart: {
    maxWidth: 1024
},

按照建议here , demo .

我正在使用 this example 中的代码.

Update 10 Feb 2020:

按照下面的建议，我使用这个代码，可以在 here 找到:

import * as React from 'react';
import * as ReactDom from 'react-dom';
import * as Highcharts from 'highcharts/highmaps';
import HighchartsReact from 'highcharts-react-official';

import mapDataWorld from '@highcharts/map-collection/custom/world.geo.json';

var data: [string, number][] = [
    // data can be found in the link
];


const options: Highcharts.Options = {
    chart: {
      height: 400
    },

    series: [{
        type: 'map',
        mapData: mapDataWorld,
        data: data,
    }],

    responsive: {
      rules: [{
        chartOptions: {
          chart: {
            height: 800
          },
          legend: {
              margin: 0
          },
          title: {
            margin: 0
          },
        },
        condition: {
          maxWidth: 1024
        }
      }]
    }
}

const App = (props: HighchartsReact.Props) =>  <div style={{
  maxWidth: '1024px',
}}>
    <HighchartsReact
        options={options}
        highcharts = { Highcharts }
        constructorType={'mapChart'}
                {...props}
    />
</div>

ReactDom.render(<App />, document.getElementById('root'));

然后在新窗口中打开结果。 在 Google Chrome 的移动 View 中，您会看到 map 被推到屏幕顶部下方。 margin: 0 仍然会发生这种情况。

Answer 1

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
...

以上选项是应用下一个定义的图表选项的条件，如果共享演示是:

chartOptions: {
    xAxis: {
        labels: {
            formatter: function () {
                return this.value.charAt(0);
            }
        }
    },
    yAxis: {
        labels: {
            align: 'left',
            x: 0,
            y: -2
        },
        title: {
            text: ''
        }
    }
}

Highcharts不提供chart.maxWidth功能，仅提供您从API共享的chart.width功能来设置图表宽度的固定值。

您可以设置 Highcharts map 渲染的 div 的最大宽度，但请记住导入 CSS。

演示:https://stackblitz.com/edit/react-ts-5upg3v?file=index.tsx

或者没有 CSS 作为内联样式 - 演示:https://stackblitz.com/edit/react-ts-uy5xkd?file=index.tsx