甘特图"type" Anychart 中的甘特图是什么？

Question

我对React还比较陌生，我正在尝试使用Anychart构建gantt图表。

对于其他图表类型来说，这似乎很直接，但我无法计算出gantt图表需要什么"图表类型"。

例如，我从他们的网站上获取数据，并试图将其绘制在甘特图上：

function GanntChart() {
const myData = [
{ name: 'Root', children: [
{ name: 'Parent 1', children: [
{ name: 'Child 1-1', value: 150000000 },
{ name: 'Child 1-2', value: 45000000 },
{ name: 'Child 1-3', value: 3200000 }
] },
{ name: 'Parent 2', children: [
{ name: 'Child 2-1', value: 55000000 },
{ name: 'Child 2-2', value: 10600000 },
{ name: 'Child 2-3', value: 5200000 }
] },
{ name: 'Parent 3', children: [
{ name: 'Child 3-1', value: 21000000 },
{ name: 'Child 3-2', value: 9000000 }
] }  
] } 
]

return (
<>
<AnyChart
type="gantt-chart" 
data={myData}
title="Simple gantt chart"
/>
</>
)

正如你所看到的，我已经尝试过"；甘特图；以及一系列其他变体。

有人有React中内置的基本龙门架的例子吗？

感谢

Answer 1

使用anychart-react可以构建许多不同的图表类型，由于甘特图的复杂性，首选的方法是在react应用程序中嵌入香草JS。

以下是的示例

import "./App.css";
import { useEffect } from "react";
//Importing a pure JS function
import { gantChart } from "./chart/anychartGantt";
function App() {
//Create a data variable
//Later you have to populate it with some actual data
const myData = [];
//Calling useEffect to get chart at the right time
useEffect(() => {
//Making a chart instance
const chart = gantChart("chart_container", myData);
//Preventing duplicate renders
return () => chart.dispose();
}, []);
return (
<div className="App">
<div id="chart_container"></div>
</div>
);
}
export default App;

//This is the main function of a Gantt Chart. 
//All of the appereance settings should be done here
export const gantChart = (container, data) => {
// Creates Gantt project chart.
var chart = anychart.ganttProject();
chart.data(data, "as-tree");
chart.title("Creating Gantt chart with React and Anychart");
chart.container(container);
chart.draw();
return chart;
}

在附带的GitHub存储库中，您可以找到将Anychart与React和VanillaJS一起使用的完整示例。

如果您发现直接React实现对您很重要，请随时联系我们[e-mail].