Я новичок в gRaphael и не хардкорный разработчик JS, способный распаковать исходный код, и кажется, что нет никаких документов о том, как правильно его использовать.
Я хочу, чтобы в моем приложении работала точечная диаграмма, но я не совсем понимаю, как значения x и y рисуют точки на холсте диаграммы.
IИспользовал демо на http://g.raphaeljs.com/dotchart.html в качестве основы для графика.Однако, когда я возиться с набором данных, я теряю все точки на графике.
Не думаю, что я понимаю взаимосвязь между точками и x и y на холсте.
Может кто-нибудь подсказать мне, как включить данные, которые я возвращаю из базы данных, в приведенный ниже код?
Возвращенные данные - это массив из 23 элементов в диапазоне от 8 до 56.
<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>
Но ничего не отображается.Это проблема, с которой я сталкиваюсь со своими данными, которые примерно совпадают с данными в этом жестко закодированном скрипте.Итак, как мне сделать так, чтобы данные в исходном выводе (см. Вопрос) отображались правильно, как вы думаете?