代码之家 › 专栏 › 技术社区 › knightsky

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

react-highcharts highcharts reactjs javascript

knightsky · 技术社区 · 2 年前

我正在react中创建highchart,其中有数千个数据。我必须根据日期和完成状态(在那个特定的日期,完成了多少状态)映射数据。我无法创建面积图,以及如何在highchart中映射不同日期的全部数据(总计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",
},
];

0 回复 | 直到 2 年前

Sebastian Hajdus 2 年前

设定 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 ,