如何为大量基于数据的日期创建区域高图？

Question

我在 React 中创建高图，其中有数千条数据。我必须根据日期和完成状态（在那个特定日期完成了多少状态）来映射该数据。我无法为此创建面积图以及如何在高图中为不同日期映射整个数据（总共 522 个）。请提出任何帮助，我们将不胜感激。谢谢。

我正在使用以下数据

var data1 = [{
    Completion_Status: "Completed",
    End_Date: "12/16/2019",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
}, {
    Completion_Status: "in progress",
    End_Date: "11/15/2018",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
}, {
    Completion_Status: "not started",
   End_Date: "01/02/2021",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},
{
Completion_Status: "Completed",
    End_Date: "12/16/2019",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},
{
    Completion_Status: "Completed",
    End_Date: "08/19/2019",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
}, {
    Completion_Status: "in progress",
    End_Date: "07/19/2020",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},
{
    Completion_Status: "Completed",
    End_Date: "08/19/2019",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},{
    Completion_Status: "not started",
    End_Date: "03/14/1990",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},
{
Completion_Status: "Completed",
    End_Date: "12/16/2019",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},
{
    Completion_Status: "Completed",
   End_Date: "05/16/2020",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},
{
    Completion_Status: "Completed",
   End_Date: "05/16/2020",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},{
    Completion_Status: "in progress",
   End_Date: "01/06/1900",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
}, {
    Completion_Status: "not started",
    End_Date: "05/31/2020",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},
{
    Completion_Status: "Completed",
   End_Date: "05/16/2020",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},
{
    Completion_Status: "Completed",
   End_Date: "05/16/2020",
    ID: 10002,
    Availability: "No",
    Received: "12-09-2019",
    Manufacture: "7-21-2013",
},
];

Answer 1

将 boost.seriesThreshold 设置为升压系列，以下示例如何在面积图中添加升压。

let data1 = [],
  data2 = []

for (let i = 0; i < 10000; i++) {
  data1.push(Math.ceil(Math.random() * 10))
  data2.push(Math.ceil(Math.random() * 10))

}
Highcharts.chart('container', {
  chart: {
    type: 'area',
    zoomType: 'x'
  },
  boost: {
    seriesThreshold: 10
  },

  plotOptions: {
    area: {
      stacking: 'normal'
    }
  },
  series: [{
    data: data1
  }, {
    data: data2
  }]
});

关于如何添加 boost 模块及其工作原理的文章： boost-module#series-boosting-versus-chart-boosting

演示：https://jsfiddle.net/BlackLabel/jb96ye58/1/

API 参考资料： https://api.highcharts.com/highcharts/boost, https://api.highcharts.com/highcharts/boost.seriesThreshold,

如何为大量基于数据的日期创建区域高图？

how to create area highchart for large amount of data based date?

javascript

reactjs

highcharts

react-highcharts