KendoReact带有map函数的ChartSeriesItem的图表平移问题

Question

通过使用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, 2003, 2004, 2005, 2006, 2007];
const series = [
{
name: "India",
data: [3.907, 7.943, 7.848, 3.907, 7.943, 7.848, 3.907, 7.943, 7.848],
category: 2002
},
{
name: "Russian Federation",
data: [4.743, 7.295, 7.175, 4.743, 7.295, 7.175, 4.743, 7.295, 7.175]
},
{
name: "Germany",
data: [0.21, 0.375, 1.161, 0.21, 0.375, 1.161, 0.21, 0.375, 1.161]
},
{
name: "World",
data: [1.988, 2.733, 3.994, 1.988, 2.733, 3.994, 1.988, 2.733, 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, 0, 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

Answer 1

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

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