Created
July 3, 2017 22:49
-
-
Save rararamorio/b3c38a1278d2ade783961b0f45522c9b to your computer and use it in GitHub Desktop.
x軸をdatetimeで表示するためのテスト
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<script src="https://code.highcharts.com/highcharts.src.js"></script> | |
<script | |
src="https://code.jquery.com/jquery-1.12.4.js" | |
integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" | |
crossorigin="anonymous"></script> | |
<style> | |
#container { | |
min-width: 310px; | |
max-width: 1024px; | |
height: 400px; | |
margin: 0 auto | |
} | |
</style> | |
<script> | |
$(function () { | |
Highcharts.setOptions({ | |
global: { | |
useUTC: false | |
} | |
}); | |
Highcharts.chart('container', { | |
title: { | |
text: 'x軸をdatetimeで表示するためのテスト' | |
}, | |
subtitle: { | |
text: 'それっぽいテストデータを表示してみる' | |
}, | |
xAxis: { | |
type: 'datetime', | |
dateTimeLabelFormats: { | |
minute: '%H:%M', | |
hour: '%m/%d %H:%M', | |
day: '%Y/%m/%d', | |
week: '%Y/%m/%d', | |
month: '%Y/%m', | |
year: '(%Y)' | |
} | |
}, | |
yAxis: { | |
title: { | |
text: 'Number of Employees' | |
} | |
}, | |
legend: { | |
layout: 'vertical', | |
align: 'right', | |
verticalAlign: 'middle' | |
}, | |
plotOptions: { | |
}, | |
series: [{ | |
name: 'Installation', | |
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175,43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175], | |
pointStart: Date.parse('2017-07-03 00:00:00'), | |
pointInterval: 3600 * 1000 | |
}, { | |
name: 'Manufacturing', | |
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434,24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434,24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434,24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434,24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434,24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434,24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434,24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434,24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434,24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434,24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434,24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434,24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434,24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434,24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434,24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434,24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434,24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434,24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434,24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434], | |
pointStart: Date.parse('2017-07-03 00:00:00'), | |
pointInterval: 3600 * 1000 | |
}, { | |
name: 'Sales & Distribution', | |
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387,11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387,11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387,11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387,11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387,11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387,11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387,11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387,11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387,11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387,11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387,11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387,11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387,11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387,11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387,11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387,11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387,11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387,11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387,11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387], | |
pointStart: Date.parse('2017-07-03 00:00:00'), | |
pointInterval: 3600 * 1000 | |
}, { | |
name: 'Project Development', | |
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227,null, null, 7988, 12169, 15112, 22452, 34400, 34227,null, null, 7988, 12169, 15112, 22452, 34400, 34227,null, null, 7988, 12169, 15112, 22452, 34400, 34227,null, null, 7988, 12169, 15112, 22452, 34400, 34227,null, null, 7988, 12169, 15112, 22452, 34400, 34227,null, null, 7988, 12169, 15112, 22452, 34400, 34227,null, null, 7988, 12169, 15112, 22452, 34400, 34227,null, null, 7988, 12169, 15112, 22452, 34400, 34227,null, null, 7988, 12169, 15112, 22452, 34400, 34227,null, null, 7988, 12169, 15112, 22452, 34400, 34227,null, null, 7988, 12169, 15112, 22452, 34400, 34227,null, null, 7988, 12169, 15112, 22452, 34400, 34227,null, null, 7988, 12169, 15112, 22452, 34400, 34227,null, null, 7988, 12169, 15112, 22452, 34400, 34227,null, null, 7988, 12169, 15112, 22452, 34400, 34227,null, null, 7988, 12169, 15112, 22452, 34400, 34227,null, null, 7988, 12169, 15112, 22452, 34400, 34227,null, null, 7988, 12169, 15112, 22452, 34400, 34227,null, null, 7988, 12169, 15112, 22452, 34400, 34227], | |
pointStart: Date.parse('2017-07-03 00:00:00'), | |
pointInterval: 3600 * 1000 | |
}, { | |
name: 'Other', | |
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111,12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111,12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111,12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111,12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111,12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111,12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111,12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111,12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111,12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111,12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111,12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111,12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111,12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111,12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111,12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111,12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111,12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111,12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111,12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111], | |
pointStart: Date.parse('2017-07-03 00:00:00'), | |
pointInterval: 3600 * 1000 | |
}] | |
}); | |
}); | |
</script> | |
</head> | |
<body> | |
<div id="container" ></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment