个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我写了下面的代码。我的服务器上有一个有效的 json 文件，如下所示:
[
{
"data": [
{
"y": 1.0,
"x": 1451936340.0
},
{
"y": 1.0,
"x": 1451936400.0
},
{
"y": 1.0,
"x": 1451936460.0
}
]
}
]
我有以下代码。我正在尝试使用 renderer: 'multi' 绘制折线图并在折线图上叠加点，但遇到了很多障碍。我是 JS 新手，我不明白我在哪里搞砸了。我想我的 jQuery.ajax 函数中需要一个回调函数，但我不确定。我感谢任何帮助。
<html>
<head>
<!-- css -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.min.css">
<!-- js -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script>
jQuery.noConflict();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.min.js"></script>
</head>
<body>
<div style="margin:10px auto;width:auto;" id="chart_container">
<div id="chart"></div>
<div id="slider"></div>
<script>
var json = jQuery.ajax({
'url': "/assets/json/data.json",
'success': function(json) {
console.log(json[0].data);
}
});
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
renderer: 'multi',
height: 200,
width: 400,
series: [
{
name: "series 1",
data: json[0].data,
color: "rgba(255, 0, 0, 0.4)",
renderer: "line"
}, {
name: "series 2",
data: json[0].data,
color: "rgba(255, 0, 0, 0.4)",
renderer: "scatterplot"
}
]
} );
graph.render();
var slider = new Rickshaw.Graph.RangeSlider.Preview( {
graph: graph,
element: document.querySelector('#slider')
} );
var detail = new Rickshaw.Graph.HoverDetail( {
graph: graph
} );
graph.render();
</script>
</div>
</body>
最佳答案
这里有一些我会改变的事情。
1.) jQuery.ajax 返回一个 promise，而不是原始数据本身，因此 var json = jQuery.ajax(...) 不会分配 json 您期望的值。
2.) 传递success回调函数以正确访问服务器返回的JSON
3.) 仅调用 graph.render() 一次。
Javascript
jQuery.ajax({
'url': "/assets/json/data.json",
'success': renderGraph // callback for ajax success
});
// wrap graph creation logic in a function to be used as a callback
function renderGraph(json) {
var graph = new Rickshaw.Graph({
element: document.getElementById("chart"),
renderer: 'multi',
height: 200,
width: 400,
series: [{
name: "series 1",
data: json[0].data,
color: "rgba(255, 0, 0, 0.4)",
renderer: "line"
}, {
name: "series 2",
data: json[0].data,
color: "rgba(255, 0, 0, 0.4)",
renderer: "scatterplot"
}]
});
// remove this, only render once at the end
// graph.render();
var slider = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.querySelector('#slider')
});
var detail = new Rickshaw.Graph.HoverDetail({
graph: graph
});
graph.render();
}
关于javascript - jQuery.ajax 和 Rickshaw - 回调函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34617442/
25
4
0
需要一些帮助来解决这个错误: Uncaught Rickshaw.Graph needs a reference to an element rickshaw.min.js:1 initialize
如何为图表中的网格线设置另一种颜色？我用他的例子: --> #chart { position: rel
我有一个启用了工具提示的 Richshaw 图(Rickshaw.Graph.HoverDetail)。我需要在其中显示更多信息，而不仅仅是系列 y 值。它可以用 Richshaw 来完成还是我必须使
我正在查看一个简单的人力车图表，其中包含来自 JSON 文件的数据。 d3.json(data, function(error, json) { var graph = new Rickshaw.Gr
我愿意使用Rickshaw(javascript库与D3配合使用)绘制图表。我的数据如下: var data = [{x : '10:16:00', y : 35.75}, {x : '10:17:0
我用人力车的例子尝试了一个简单的例子...... Rest 服务器返回一个 json 文件...如果我将其打印到控制台，它与示例中的完全相同: [{ color: 'steelblue
我是 Rickshaw JS 工具包的新手。在示例中给出 http://code.shutterstock.com/rickshaw/examples/extensions.html图表底部用于选择时
我正在创建一个 Rickshaw.js 支持的图表，就像这个例子中的一样:http://code.shutterstock.com/rickshaw/tutorial/example_07.html基
我写了下面的代码。我的服务器上有一个有效的 json 文件，如下所示: [ { "data": [ { "y": 1.0, "x": 14519
1.) 如何使用新的 Rickshaw.Graph.Ajax 访问数据？我的完整代码如下，包括通过 AJAX 调用的 JSON 示例集: (function(){ var ajaxGraph
我正在使用 requirej 加载所有 Rickshaw js 文件，这样: define([ "rickshaw","rickshaw/Rickshaw.Class","rickshaw
我想在点击 Rickshaw 中图例中的项目时添加功能。我使用标准代码添加切换功能，我想扩展它来运行我自己的函数: shelving = new Rickshaw.Graph.Behavior.Ser
我是 JS/D3 和 Rickshaw 的新手。我正在尝试修改 example plot 以满足我的需要。 我的 x 轴是 DNA 序列，即字母 ACTG 的组合。我将此序列解析为数组，然后使用，将其
我有一个详细说明风速的图表，我希望 Y 轴上的网格每 5 (m/s) 有一个刻度。如何设置Y轴网格的密度？ // triggered when data has been loaded via aja
我正在开发一个使用基于 Sinatra 的框架的项目，名为 Dashing。我的项目的一部分是使用 RickShaw Graph 创建图表。我的问题是我无法在 X 轴上显示月份名称和日期。我正在使用
我正在使用 Rickshaw JS 创建一个图表。为此，我创建了一个函数，调用该函数时会呈现图形。我面临的问题是，当在脚本标签内调用时，该函数可以正常渲染一切，正如我所期望的那样。但是，当从 AJAX
所以我在 Dashing 上运行了许多不同的图表使用单个 ' Rickshaw ' 小部件。我想使用 CSS 选择器来定义 x 轴 View 。我目前的设置是这样的... 它仪表板.erb:
我有一个包含对 {x: someValue, y: count} 的数据集，其中 someValue 是星期几，格式为 (1. .7) 其中 1 是“星期日”。在 Ricskshaw 图表上，我想分别
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。 关闭 7 年前。
我有这个错误:TypeError: $(element).slider 不是函数 使用以下脚本: Rickshaw.namespace('Rickshaw.Graph.RangeSlider'); R
我是一名优秀的程序员,十分优秀！