我正在创建一个可用作热图的表格，根据星期几和小时显示累计值（在本例中为销售额）。表格的y轴是星期几（星期日 - 星期六），而x轴/表格标题是小时0-23。
如果有多天，例如2018-01-01和2018-01-08都是星期一，那么销售数据应该合并。此外，在这几天结合后可能会有重复的小时数，在这种情况下，值应结合起来显示星期一那小时的累计值（销售额）。
如果重要，这个项目就在React中。
数据如下所示：
vagrantfile:
target: local
vm:
provider:
local:
box: centos/7
box_url: 'false'
box_version: '0'
chosen_virtualizer: virtualbox
virtualizers:
virtualbox:
modifyvm:
natdnshostresolver1: false
showgui: 0
vmware:
numvcpus: 1
parallels:
linked_clone: 0
check_guest_tools: 0
update_guest_tools: 0
machines:
machine1:
id: appserver
hostname: appserver
network:
private_network: 192.168.50.4
forwarded_port:
port1:
host: '2223'
guest: '22'
port2:
host: '8080'
guest: '80'
memory: '2048'
cpus: '1'
provision:
puppet:
manifests_path: puphpet/puppet/manifests
module_path:
- puphpet/puppet/modules
- puphpet/puppet/manifests
options:
- '--verbose'
- '--hiera_config /opt/puphpet/puppet/hiera.yaml'
synced_folder:
folder1:
owner: vagrant
group: vagrant
source: ../../www
target: /var/www
sync_type: default
smb:
smb_host: ''
smb_username: ''
smb_password: ''
mount_options:
dir_mode: '0775'
file_mode: '0664'
rsync:
args:
- '--verbose'
- '--archive'
- '-z'
exclude:
- .vagrant/
- .git/
auto: 'true'
usable_port_range:
start: 10200
stop: 10500
post_up_message: ''
ssh:
host: 'false'
port: 'false'
private_key_path: 'false'
username: vagrant
guest_port: 'false'
keep_alive: '1'
forward_agent: 'false'
forward_x11: 'false'
shell: 'bash -l'
insert_key: 'false'
vagrant:
host: detect
proxy:
http: ''
https: ''
ftp: ''
no_proxy: ''
server:
install: '1'
packages:
- bash-completion
- htop
- vim
- nano
- mc
- wget
users_groups:
install: '1'
groups: { }
users: { }
locale:
install: '1'
settings:
default_locale: en_US.UTF-8
locales:
- en_GB.UTF-8
- en_US.UTF-8
timezone: America/New York
firewall:
install: '0'
rules: { }
resolv:
install: '1'
nameservers:
- 8.8.8.8
- 8.8.4.4
domainname: ''
searchpath: { }
cron:
install: '1'
jobs: { }
nginx:
install: '0'
settings:
version: present
default_vhost: 1
proxy_buffers: '4 256k'
proxy_buffer_size: 128k
proxy_connect_timeout: 600s
proxy_send_timeout: 600s
proxy_read_timeout: 600s
names_hash_bucket_size: 128
upstreams: { }
vhosts:
vhost1:
server_name: awesome.test
server_aliases:
- www.awesome.test
www_root: /var/www/awesome
listen_port: '80'
client_max_body_size: 1m
ssl: '0'
locations:
php_html:
www_root: /var/www/awesome
location: /
autoindex: 'off'
internal: 'false'
index_files:
- index.html
- index.php
try_files:
- $uri
- $uri/
- /index.php$is_args$args
php_php:
www_root: /var/www/awesome
location: '~ \.php$'
autoindex: 'off'
internal: 'false'
index_files:
- index.php
try_files:
- $uri
- $uri/
set:
- '$path_info $fastcgi_path_info'
fastcgi: '127.0.0.1:9000'
fastcgi_index: index.php
fastcgi_split_path: '^(.+?\.php)(/.*)$'
fast_cgi_params_extra:
- 'SCRIPT_FILENAME $document_root$fastcgi_script_name'
proxies: { }
apache:
install: '1'
settings:
version: 2.4
user: www-data
group: www-data
default_vhost: true
manage_user: false
manage_group: false
sendfile: 0
modules:
- proxy_fcgi
- rewrite
- vhost_alias
vhosts:
vhost1:
servername: api
serveraliases:
- api.internal
- api.localhost
- www.api.localhost
- api.dev
- www.api.dev
docroot: /var/www/api
port: '80'
setenvif:
- 'Authorization "(.*)" HTTP_AUTHORIZATION=$1'
ssl: '0'
ssl_cert: LETSENCRYPT
ssl_key: LETSENCRYPT
ssl_chain: LETSENCRYPT
ssl_certs_dir: LETSENCRYPT
ssl_protocol: ''
ssl_cipher: ''
directories:
php_html:
provider: directory
path: /var/www/api/public
directoryindex: 'index.php index.html'
options:
- Indexes
- FollowSymlinks
- MultiViews
allow_override:
- All
require:
- 'all granted'
php_php:
provider: filesmatch
path: \.php$
sethandler: 'proxy:fcgi://127.0.0.1:9000'
letsencrypt:
install: '0'
settings:
email: ''
webserver_service: ''
domains: { }
php:
install: '1'
settings:
version: '7.2'
modules:
php:
- cli
- intl
- xml
- mysqlnd
- mssql
- pdo
- gd
- soap
- mbstring
- mcrypt
- pear
- odbc
pear: { }
pecl: { }
ini:
display_errors: 'On'
error_reporting: '-1'
session.save_path: /var/lib/php/session
date.timezone: America/New York
fpm_ini:
error_log: /var/log/php-fpm.log
fpm_pools:
pool1:
ini:
prefix: www
listen: '127.0.0.1:9000'
security.limit_extensions: .php
user: www-user
group: www-data
composer: '1'
composer_home: ''
xdebug:
install: '1'
settings:
xdebug.default_enable: '1'
xdebug.remote_autostart: '0'
xdebug.remote_connect_back: '1'
xdebug.remote_enable: '1'
xdebug.remote_handler: dbgp
xdebug.remote_port: '9000'
blackfire:
install: '0'
settings:
server_id: ''
server_token: ''
agent:
http_proxy: ''
https_proxy: ''
log_file: stderr
log_level: '1'
php:
agent_timeout: '0.25'
log_file: ''
log_level: '1'
wpcli:
install: '0'
drush:
install: '0'
version: 8.0.5
ruby:
install: '0'
versions:
ruby1:
default: '1'
version: '2.4'
gems:
- deep_merge@1.2.1
- activesupport@5.1.4
- vine@0.4
python:
install: '1'
packages: { }
versions: { }
nodejs:
install: '0'
settings:
version: '6'
npm_packages: { }
mariadb:
install: '0'
settings:
version: '10.1'
root_password: '123'
override_options: { }
users:
user1:
name: dbuser
password: '123'
databases:
database1:
name: dbname
collate: utf8_general_ci
sql: ''
grants:
grant1:
user: dbuser
table: '*.*'
privileges:
- ALL
mysql:
install: '0'
settings:
version: '5.7'
root_password: ''
override_options: { }
users: { }
databases: { }
grants: { }
postgresql:
install: '0'
settings:
global:
encoding: UTF8
version: '9.6'
server:
postgres_password: '123'
databases:
database1:
dbname: dbname
owner: dbuser
users:
user1:
username: dbuser
password: '123'
superuser: '1'
grants:
grant1:
role: dbuser
db: dbname
privilege:
- ALL
mongodb:
install: '0'
settings:
bind_ip: 127.0.0.1
port: '27017'
globals:
version: 3.6.2
databases:
database1:
name: dbname
user: dbuser
password: '123'
redis:
install: '0'
settings:
port: '6379'
sqlite:
install: '0'
databases:
database1:
name: dbname
owner: www-data
group: www-data
sql_file: ''
mailhog:
install: '0'
settings:
smtp_ip: 0.0.0.0
smtp_port: 1025
http_ip: 0.0.0.0
http_port: '8025'
path: /usr/local/bin/mailhog
beanstalkd:
install: '0'
settings:
listenaddress: 0.0.0.0
listenport: '11300'
maxjobsize: '65535'
maxconnections: '1024'
binlogdir: /var/lib/beanstalkd/binlog
binlogfsync: null
binlogsize: '10485760'
beanstalk_console: 0
rabbitmq:
install: '0'
settings:
port: '5672'
users:
user1:
admin: '1'
name: admin
password: '123'
tags:
- admin
vhosts: { }
plugins: { }
elastic_search:
install: '0'
settings:
version: 6.1.2
java_install: true
instances:
instance1:
name: es-01
jvm_options:
- '-Xms2G'
- '-Xmx2G'
我相信我需要从这些数据中创建一个新数组，以便更容易地创建表。到目前为止，在componentDidMount（）我使用moment.js来获取每个日期的星期几，但我不确定如何最好地组合重复项，然后重复小时数。
我考虑使用_underscore，但无法弄清楚我将如何使用它。
到目前为止：
data2: [
{
day: "2018-01-01",
sales: [{hour: 6, value: 23}, {hour: 9, value: 164}]
},
{
day: "2018-01-02",
sales: [{hour: 3, value: 223}, {hour: 4, value: 12}]
},
{
day: "2018-01-03",
sales: [{hour: 7, value: 323}, {hour: 3, value: 86}]
},
{
day: "2018-01-04",
sales: [{hour: 5, value: 173}, {hour: 21, value: 65}]
},
{
day: "2018-01-05",
sales: [{hour: 12, value: 193}, {hour: 1, value: 53}]
},
{
day: "2018-01-06",
sales: [{hour: 15, value: 263}, {hour: 2, value: 56}]
},
{
day: "2018-01-07",
sales: [{hour: 18, value: 89}, {hour: 8, value: 378}]
},
{
day: "2018-01-08",
sales: [{hour: 6, value: 76}, {hour: 17, value: 398}]
}
]
我想要的输出是这样的：
var newDataArr = [];
for(var i = 0; i < this.state.data2.length; i++){
var day = moment(this.state.data2[i].day,'YYY-MM-DD').format('ddd');
console.log(day);
if(newDataArr).contains(day) {
// combine?
} else {
// add new day of week
}
}
答案 0 :(得分：0)
以2种形式实现了结果。我更喜欢第二种形式（不使用数组）。
var data = [
{
day: "2018-01-01",
sales: [{hour: 6, value: 23}, {hour: 9, value: 164}]
},
{
day: "2018-01-02",
sales: [{hour: 3, value: 223}, {hour: 4, value: 12}]
},
{
day: "2018-01-03",
sales: [{hour: 7, value: 323}, {hour: 3, value: 86}]
},
{
day: "2018-01-04",
sales: [{hour: 5, value: 173}, {hour: 21, value: 65}]
},
{
day: "2018-01-05",
sales: [{hour: 12, value: 193}, {hour: 1, value: 53}]
},
{
day: "2018-01-06",
sales: [{hour: 15, value: 263}, {hour: 2, value: 56}]
},
{
day: "2018-01-07",
sales: [{hour: 18, value: 89}, {hour: 8, value: 378}]
},
{
day: "2018-01-08",
sales: [{hour: 6, value: 76}, {hour: 17, value: 398}]
}
];
console.log("Using Method 1 : ");
var result = [];
data.forEach(function(dataobj){
var day = moment(dataobj.day).format("ddd");
var detailsindex = result.findIndex(function(elem){ return elem.day==day;});
var details = detailsindex>-1 ? result[detailsindex] : {day:day,sales:[]};
dataobj.sales.forEach(function(salesobj){
var index = details.sales.findIndex(function(elem){return elem.hour==salesobj.hour});
var obj = index>-1 ? details.sales[index] : {hour:salesobj.hour,value:0};
obj.value+=salesobj.value;
if(index>-1) details.sales[index]=obj;
else details.sales.push(obj)
});
if(detailsindex>-1) result[detailsindex]=details;
else result.push(details)
});
console.log(result);<script src="https://momentjs.com/downloads/moment.js"></script>
var data = [
{
day: "2018-01-01",
sales: [{hour: 6, value: 23}, {hour: 9, value: 164}]
},
{
day: "2018-01-02",
sales: [{hour: 3, value: 223}, {hour: 4, value: 12}]
},
{
day: "2018-01-03",
sales: [{hour: 7, value: 323}, {hour: 3, value: 86}]
},
{
day: "2018-01-04",
sales: [{hour: 5, value: 173}, {hour: 21, value: 65}]
},
{
day: "2018-01-05",
sales: [{hour: 12, value: 193}, {hour: 1, value: 53}]
},
{
day: "2018-01-06",
sales: [{hour: 15, value: 263}, {hour: 2, value: 56}]
},
{
day: "2018-01-07",
sales: [{hour: 18, value: 89}, {hour: 8, value: 378}]
},
{
day: "2018-01-08",
sales: [{hour: 6, value: 76}, {hour: 17, value: 398}]
}
];
console.log("Using Method 2 : ");
var result = {};
data.forEach(function(dataobj){
var day = moment(dataobj.day).format("ddd");
result[day] = result[day] || {};
var details = result[day];
dataobj.sales.forEach(function(salesobj){
var count = details[salesobj.hour] || 0;
details[salesobj.hour]=count+salesobj.value;
});
});
console.log(result);<script src="https://momentjs.com/downloads/moment.js"></script>