6
githubに表示されているパンチカードスタイルのグラフをハイチャートで複製したいと思います。私は本当にこの1に苦しんだHighcharts.jsを使ってパンチカードスタイルのグラフを作成する
、ここではそこに私を取得するために開始しjsfiddleをです。私はむしろ、xとyの日を持つだろうが、私はこれをどうやってやるべきかについて迷っている。
助けてください。
TIA！
A
答えて
8
私は軸を反転することができませんでしたが、あなたのために多くのものを整理しました。
HTML：
<div id="container" style="height: 400px"></div>
JS：
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'scatter'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
},
plotOptions: {
scatter: {
marker: {
radius: 4,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
data: [{y: 161}, {y: 167}, {y: 165}, {y: 140}, {y: 172}, {y: 163}, {y: 187}, {y: 107}, {y: 147}, {y: 145}, {y: 112}, {y: 199}]
}]
});
+0
スーパークローズ - 非常に高く評価されています。 y軸に00:00から24:00の時間を表示する方法を理解できれば、これが勝者になるでしょう。 Sun-Satをx軸に表示するようにフィディルドを更新しました。私を近づけてくれてありがとう。 –
+3
私は助けてくれてうれしいですが、投票が本当に励みになりました：P **冗談**。さらなる改善を検討しようとします。 –
2
4
を行うための近い道にあなたを導くために、私はそれがだと思いますこのソリューションは同じ状況の他の人に役立つでしょう。
は、ここに私のソリューションです：
$(function() {
$('#container').highcharts({
chart: {
defaultSeriesType: 'scatter'
},
title: {
text: 'Punchcard'
},
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
hour: '%I %P'
},
tickInterval: 3600000 * 1
},
yAxis: {
categories: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
},
series: [{
data: [
{y: 0, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
{y: 0, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
{y: 1, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
{y: 2, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
{y: 3, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
{y: 4, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
{y: 5, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 1, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 2, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 3, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 4, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 5, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 6, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 7, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 8, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 9, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
{y: 6, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},
]
}]
});
});
そして、ここでのデモです：http://jsfiddle.net/KmPJE/1/
は、それはあなたのために働くなら、私に教えてください。
+0
本当に素敵な仕事です。古い投稿をフォローアップしてください。 –
+0
問題ありません！私は現在、バラバラではなくバブルチャートを使用したより良いアプローチに取り組んでいます。 – kerberoS
関連する問題
- 1. highcharts.jsでカスタムヒストグラムを作成する
- 2. forループの値を使って基本グラフを作成する
- 3. スートを使って2つのグラフを作成する方法
- 4. 2つの変数を使ってExcelグラフを作成する
- 5. python：辞書を使ってmatplotlibを使って棒グラフを作成する
- 6. OpenGL ESを使ってグラフを作成する
- 7. forループを使ってグラフを作成する
- 8. Linux上でPrintfを使ってグラフを作成する
- 9. numpy.polyfitを使ってグラフを作成するには？
- 10. matplotlibを使ってグラフを作成するには？
- 11. データテーブルを使って棒グラフを作成する
- 12. jQueryを使ってグラフを作成するには？
- 13. 相関行列を使ってグラフを作成する
- 14. グラフを作成する関数を使ってパワーポイントにエクスポート
- 15. matplotlibとpandasを使って連続グラフを作成
- 16. Apacheを使ってExcelでグラフを作成
- 17. ボタンを使ってグラフを作成したい
- 18. javascriptでカスタムxmlを使ってグラフを作成
- 19. MpChartを使ってスタックバーチャルを作成してグラフを停止する方法
- 20. サイト使用のためにSQLとphpを使って週グラフと月グラフを作成する
- 21. Python：SQlite3データベースのデータを使ってTkinterに棒グラフを作成する
- 22. グラフapiを使ってfbページで作成されたコメント
- 23. Highcharts.jsはグラフの行を見ることができません
- 24. ノードリストによって誘導されたグラフの部分グラフを作成する
- 25. [グラフ]：関係のグラフを作成する
- 26. 与えられたランダムなパスを使ってグラフを作成する
- 27. Python2.7：インデックスとカラム情報を使って棒グラフを作成するには？
- 28. java.utilを使用してグラフのランダムなエッジを作成する
- 29. グラフAPIを使用してウェブサイトの「ソーシャルボタン」を作成する
- 30. ZabbixのMBean CompositeDataを使用してグラフを作成する
jsfiddleをmangobugの提案を変更して更新しました。残されているのは、y軸上の時間を得ることだけです。 –
y軸とx軸のラベルを取得するための別のアップデートがあります：http://jsfiddle.net/CA2cT/8/ – Mark
完璧な仕上がり！それをドラッグしてくれてありがとう。 –