具有地图功能的 ChartSeriesItem 的 KendoReact 图表平移问题

如何解决具有地图功能的 ChartSeriesItem 的 KendoReact 图表平移问题

通过使用 map 方法生成 <ChartSeriesItem> 来寻找 kendoReact PANNABLE 柱状图。但是平移不起作用，而是不断减小列宽以适应浏览器。我试过下面的代码。

通过设置 'pannable true' 和 'zoomable true' 尝试过，但它仅在没有地图的情况下绑定数据时有效。

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'hammerjs';

import {
    Chart,ChartSeries,ChartSeriesItem,ChartCategoryAxis,ChartCategoryAxisItem
} from '@progress/kendo-react-charts';


const categories = [2002,2003,2004,2002,2005,2006,2007];
const series = [
  {
    name: "India",data: [3.907,7.943,7.848,3.907,7.848],category: 2002
  },{
    name: "Russian Federation",data: [4.743,7.295,7.175,4.743,7.175]
  },{
    name: "Germany",data: [0.21,0.375,1.161,0.21,1.161]
  },{
    name: "World",data: [1.988,2.733,3.994,1.988,3.994]
  }
];

const generateSeries = () => {
    const series = [];

    for (let idx = 0; idx < 10000; idx++) {
        series.push({
            value: Math.floor(Math.random() * 100) + 1,category: new Date(2000,idx)
        });
    }

    return series;
};

class ChartContainer extends React.Component {
    render() {
        return (
            <Chart pannable={true} zoomable={true}>
            <ChartCategoryAxis>
              <ChartCategoryAxisItem categories={categories} />
            </ChartCategoryAxis>
            <ChartSeries>
              {series.map((item,idx) => (
                <ChartSeriesItem
                  key={idx}
                  type="column"
                  tooltip={{ visible: true }}
                  data={item.data}
                  name={item.name}
                />
              ))}
            </ChartSeries>
            </Chart>
        );
    }
}

ReactDOM.render(
    <ChartContainer />,document.querySelector('my-app')
);

stackblitz - https://stackblitz.com/edit/react-afgicw?file=app/main.jsx

解决方法

通过设置类别轴的最大选项，默认启用平移。否则它会不断缩小列的宽度以保持所有可见。

<ChartCategoryAxisItem categories={categories} max={5} />