时间戳

首页 > 解决方案 > 在 Highchart 中按工作日分组数据

javascript - 在 Highchart 中按工作日分组数据

问题描述

我正在绘制一个需要将所选日期范围的数据与工作日组合的图表我的意思是，如果我选择了一个日期范围，例如：2021-05-01 到 2021-05-31 考虑到 2021-05-01,2021 -05-08,2021-05-15 这些天是星期五，所以我需要合并这些日期的数据并显示为带有星期五标签的一个数据。使用我使用的当前选项，图表是这样绘制的。有什么方法可以正确显示它。

演示小提琴

这是我目前得到结果的方式

在此处输入图像描述

这是我期待的结果

在此处输入图像描述

这些是我在 highchart 中使用的当前配置。

Highcharts.chart("multistackedbarchart-II", {
    chart: {
        type: "column",
    },
    title: {
        text: "Sent/Received Comparison",
    },
    xAxis: {
        title: {
            text: "Day",
        },
        categories: [labels],
    },
    yAxis: {
        min: 0,
        title: {
            text: "",
        },
        stackLabels: {
            enabled: false,
            style: {
                fontWeight: "bold",
                color:
                    // theme
                    (Highcharts.defaultOptions.title.style && Highcharts.defaultOptions.title.style.color) ||
                    "gray",
            },
        },
    },
    legend: {
        align: "center",
        verticalAlign: "bottom",
        x: 0,
        y: 0,
    },
    tooltip: {
        headerFormat: "<b>{point.x}</b><br/>",
        pointFormat: "{series.name}: {point.y}",
    },
    plotOptions: {
        column: {
            stacking: "normal",
            dataGrouping: {
                forced: true,
                units: [['day', [1]]]
            }
        },
    },
    series: chartdata.multistackedbarchart,
    credits: {
        enabled: false,
    },
});
Highcharts.setOptions({ lang: { noData: "No Data Available" } });

标签： javascripthighcharts

解决方案

您可以使用Array.map()andArray.filter()方法创建一个特殊功能来执行此排序：

const categories = [
            "2021-08-04",
            "2021-08-05",
            "2021-08-06",
            "2021-08-07",
            "2021-08-08",
            "2021-08-09",
            "2021-08-10",
            "2021-08-11",
            "2021-08-12",
            "2021-08-13",
            "2021-08-14",
            "2021-08-15",
            "2021-08-16",
            "2021-08-17",
            "2021-08-18",
            "2021-08-19",
            "2021-08-20",
            "2021-08-21",
            "2021-08-22",
            "2021-08-23",
            "2021-08-24",
            "2021-08-25",
            "2021-08-26",
            "2021-08-27",
            "2021-08-28",
            "2021-08-29",
            "2021-08-30",
            "2021-08-31",
            "2021-09-01",
            "2021-09-02",
            "2021-09-03",
            "2021-09-04",
            "2021-09-05",
            "2021-09-06",
            "2021-09-07",
            "2021-09-08",
            "2021-09-09",
            "2021-09-10",
            "2021-09-11",
            "2021-09-12",
            "2021-09-13",
            "2021-09-14",
            "2021-09-15",
            "2021-09-16",
            "2021-09-17",
            "2021-09-18",
            "2021-09-19",
            "2021-09-20",
            "2021-09-21",
            "2021-09-22",
            "2021-09-23",
            "2021-09-24",
            "2021-09-25",
            "2021-09-26",
            "2021-09-27",
            "2021-09-28",
            "2021-09-29",
            "2021-09-30",
            "2021-10-01",
            "2021-10-02",
            "2021-10-03",
            "2021-10-04",
            "2021-10-05",
            "2021-10-06",
            "2021-10-07",
            "2021-10-08",
            "2021-10-09",
            "2021-10-10",
            "2021-10-11",
            "2021-10-12"]
 const messagesSent = [ 32,
            60,
            71,
            3,
            1,
            25,
            16,
            23,
            28,
            25,
            2,
            1,
            43,
            49,
            32,
            35,
            26,
            2,
            1,
            8,
            36,
            47,
            15,
            20,
            2,
            1,
            2,
            18,
            20,
            30,
            43,
            4,
            4,
            15,
            14,
            48,
            39,
            3,
            2,
            0,
            48,
            34,
            15,
            9,
            1,
            3,
            1,
            85,
            27,
            72,
            11,
            4,
            2,
            0,
            29,
            13,
            21,
            15,
            32,
            2,
            0,
            58,
            37,
            37,
            24,
            5,
            1,
            0,
            0,
            0]
            
            
const messagesReceived = [29,
            79,
            80,
            7,
            2,
            24,
            32,
            23,
            44,
            42,
            3,
            1,
            65,
            69,
            46,
            47,
            23,
            3,
            1,
            28,
            35,
            65,
            22,
            19,
            4,
            1,
            7,
            10,
            32,
            31,
            13,
            8,
            2,
            4,
            48,
            53,
            46,
            7,
            4,
            0,
            48,
            40,
            23,
            18,
            2,
            6,
            2,
            79,
            25,
            86,
            9,
            8,
            5,
            0,
            25,
            18,
            18,
            14,
            37,
            2,
            0,
            52,
            70,
            27,
            25,
            17,
            1,
            0,
            0,
            0]
            
const organizeData = (days, sent, received) => {
  const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
  
  // get name of weekday
  const getDayOfWeek = date => {
    const dayOfWeek = new Date(date).getDay();    
    
    return isNaN(dayOfWeek) ? null : dayNames[dayOfWeek];
  }
  
  
  return dayNames.map((dayName) => {
    let correspondingMessagesSent = []
    let correspondingMessagesReceived = []
    
    const matchedDays = days.filter((day, index) => {
      if(dayName === getDayOfWeek(day)) {
        correspondingMessagesSent.push(sent[index])
        correspondingMessagesReceived.push(received[index])
        return day
      }
    })
    
    return { [dayName]: { dates: matchedDays, 
                          sent: correspondingMessagesSent,
                          received: correspondingMessagesReceived} }
  })
}



console.log(organizeData(categories, messagesSent, messagesReceived))
/* This is not a part of answer. It is just to give the output fill height. So IGNORE IT */
.as-console-wrapper { max-height: 100% !important; top: 0; }

推荐阅读