0

<ChartSeriesItem>通过使用 map 方法生成来寻找 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

4

1 回答 1

0

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

<ChartCategoryAxisItem categories={categories} max={5} />
于 2021-02-19T17:29:21.133 回答