Skip to content

Instantly share code, notes, and snippets.

@rararamorio

rararamorio/gist:b3c38a1278d2ade783961b0f45522c9b

Created July 3, 2017 22:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rararamorio/b3c38a1278d2ade783961b0f45522c9b to your computer and use it in GitHub Desktop.
Save rararamorio/b3c38a1278d2ade783961b0f45522c9b to your computer and use it in GitHub Desktop.
Download ZIP
x軸をdatetimeで表示するためのテスト
Raw
gistfile1.txt
<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