Anychart 中的甘特图“类型”是什么？答案

【问题标题】：What is the gantt chart "type" in Anychart?Anychart 中的甘特图“类型”是什么？
【发布时间】：2023-02-16 01:05:13
【问题描述】：

我对 React 比较陌生，我正在尝试使用 Anychart 构建甘特图。

对于其他图表类型来说，这似乎很简单，但我无法弄清楚甘特图需要什么“图表类型”。

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


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 构建的基本甘特图示例吗？

谢谢

【问题讨论】：

你试过“ganttProject”吗？这就是引用 in the docs 的方式。
太棒了，完美的作品。也感谢您的链接，搜索了多年！

标签： reactjs anychart

【解决方案1】：

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

这是例子

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 存储库中，您可以找到完整的 example of using Anychart with React and Vanilla JS。

如果您发现直接实施 React 对您很重要，请随时通过 support@anychart.com 与我们联系。

【讨论】：