私はgRaphaelを初めて使用し、ソースコードの選択を解除できるハードコアJS開発者ではありません。また、適切に使用する方法についてのドキュメントはありません。
アプリでドットチャートを起動して実行したいと思っていますが、x値とy値がチャートキャンバスにドットを描画する方法について混乱しています。
グラフのベースとしてhttp://g.raphaeljs.com/dotchart.htmlのデモを使用しています。ただし、データセットをいじくり回すと、グラフからすべてのドットが失われます。
キャンバス内のドットとxおよびyの関係を理解していないと思います。
データベースから返すデータを以下のコードに含める方法について誰かに教えてもらえますか？
返されるデータは、8から56の範囲の23個の要素を持つ配列です。
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var r = Raphael("holder2"),
xs = <%= chart_xs(@weeks) %>,
ys = <%= chart_ys(@weeks) %>,
data = <%= chart_data(@weeks) %>,
axisy = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisx = ["12am", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12pm", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
r.g.txtattr.font = "11px 'Fontin Sans', Fontin-Sans, sans-serif";
r.g.dotchart(10, 10, 620, 260, xs, ys, data, {
symbol: "o",
max: 10,
heat: true,
axis: "0 0 1 1",
axisxstep: 23,
axisystep: 6,
axisxlabels: axisx,
axisxtype: " ",
axisytype: " ",
axisylabels: axisy
}).hover(function () {
this.tag = this.tag || r.g.tag(this.x, this.y, this.value, 0, this.r + 2).insertBefore(this);
this.tag.show();
}, function () {
this.tag && this.tag.hide();
});
};
</script>
このような出力：
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var r = Raphael("holder2"),
xs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
ys = [220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220],
data = [20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
axisy = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisx = ["12am", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12pm", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
r.g.txtattr.font = "11px 'Fontin Sans', Fontin-Sans, sans-serif";
r.g.dotchart(10, 10, 620, 260, xs, ys, data, {symbol: "o", max: 10, heat: true, axis: "0 0 1 1", axisxstep: 23, axisystep: 6, axisxlabels: axisx, axisxtype: " ", axisytype: " ", axisylabels: axisy}).hover(function () {
this.tag = this.tag || r.g.tag(this.x, this.y, this.value, 0, this.r + 2).insertBefore(this);
this.tag.show();
}, function () {
this.tag && this.tag.hide();
});
};
</script>
フレデリコ、なぜこのチャートが画面に何も表示されないのか説明できますか？説明が当てはまる場合は、23個のデータポイントのそれぞれをキャンバス全体に連続した線で表す必要があります。
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var r = Raphael("holder"),
xs = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
ys = [7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
data = [294, 300, 204, 255, 348, 383, 334, 217, 114, 33, 44, 26, 41, 39, 52, 17, 13, 2, 0, 2, 5, 6, 64],
axisy = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisx = ["12am", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12pm", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
r.g.txtattr.font = "11px 'Fontin Sans', Fontin-Sans, sans-serif";
r.g.dotchart(10, 10, 620, 260, xs, ys, data, {symbol: "o", max: 10, heat: true, axis: "0 0 1 1", axisxstep: 23, axisystep: 6, axisxlabels: axisx, axisxtype: " ", axisytype: " ", axisylabels: axisy}).hover(function () {
this.tag = this.tag || r.g.tag(this.x, this.y, this.value, 0, this.r + 2).insertBefore(this);
this.tag.show();
}, function () {
this.tag && this.tag.hide();
});
};
</script>
ただし、何も表示されません。これは私のデータで発生している問題であり、このハードコードされたスクリプトのデータとほぼ一致しています。では、元の出力（質問を参照）のデータを正しく表示するにはどうすればよいと思いますか？