28,390
社区成员
发帖
与我相关
我的任务
分享Echart4 使用dataset 异步加载数据失败，上贴求助了
项目需要画几个图就用了Echarts，但是异步加载没有成功，不知道哪里的问题，只能上贴求助了
ashx传过来的值
{
"source":
[
["product","2015","2016","2017"],
["Matcha Latte","43.3","85.8","93.7"],
["Milk Tea","83.1","73.4","55.1"],
["Cheese Cocoa","86.4","65.2","82.5"],
["Walnut Brownie","72.4","53.9","39.1"],
["Matcha Latte","43.3","85.8","93.7"]
]
}
JS 脚本
ashx传过来的值
{
"source":
[
["product","2015","2016","2017"],
["Matcha Latte","43.3","85.8","93.7"],
["Milk Tea","83.1","73.4","55.1"],
["Cheese Cocoa","86.4","65.2","82.5"],
["Walnut Brownie","72.4","53.9","39.1"],
["Matcha Latte","43.3","85.8","93.7"]
]
}
JS 脚本
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="echarts.js"></script>
</head>
<body>
<form id="form1" runat="server">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
myChart.setOption({
legend: {},
tooltip: {},
dataset: {
// 提供一份数据。
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 1, 1, 1],
['Milk Tea', 1, 1, 1],
['Cheese Cocoa', 1, 1, 1],
['Walnut Brownie', 1, 1, 1]
]
},
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: { type: 'category' },
// 声明一个 Y 轴，数值轴。
yAxis: {},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: [
{ type: 'bar' },
{ type: 'bar' },
{ type: 'bar' }
]
});
$.ajax({
type: "post",
async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url: "Handler.ashx", //请求发送到TestServlet处
dataType: "json", //返回数据形式为json
success: function (result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
legend: {},
tooltip: {},
dataset: result,
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: { type: 'category' },
// 声明一个 Y 轴，数值轴。
yAxis: {},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: [
{ type: 'bar' },
{ type: 'bar' },
{ type: 'bar' }
]
});
}
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});
</script>
</form>
</body>
</html>
...全文
请发表友善的回复…
发表回复
Hello World, 2019-02-14
- 打赏
- 举报
不知道你完整的代码是什么样子
下面代码测试是OK的：
Handler.ashx:
下面代码测试是OK的：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DataSourceTest</title>
<script src="../../Script/echarts4.1.0/echarts.js"></script>
<script src="../../Script/jquery-1.11.3.js"></script>
</head>
<body>
<form id="form1" runat="server">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
</form>
</body>
</html>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
myChart.setOption({
legend: {},
tooltip: {},
dataset: {
// 提供一份数据。
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 1, 1, 1],
['Milk Tea', 1, 1, 1],
['Cheese Cocoa', 1, 1, 1],
['Walnut Brownie', 1, 1, 1]
]
},
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: { type: 'category' },
// 声明一个 Y 轴，数值轴。
yAxis: {},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: [
{ type: 'bar' },
{ type: 'bar' },
{ type: 'bar' }
]
});
$.ajax({
type: "post",
async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url: "Handler.ashx", //请求发送到TestServlet处
dataType: "json", //返回数据形式为json
success: function (result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
dataset: result
});
}
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});
</script>
Handler.ashx:
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
public class Handler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write(@"{
""source"":
[
[""product"",""2015"",""2016"",""2017""],
[""Matcha Latte"",43.3,85.8,93.7],
[""Milk Tea"",83.1,73.4,55.1],
[""Cheese Cocoa"",86.4,65.2,82.5],
[""Walnut Brownie"",72.4,53.9,39.1],
[""Matcha Latte"",43.3,85.8,93.7]
]
}");
}
public bool IsReusable
{
get
{
return false;
}
}
}
ykdrj 2019-02-11
- 打赏
- 举报
年前求助到年后，初六啦，都回来了吧，谁能帮看看呀，这个年都过得提心吊胆的
ykdrj 2019-02-02
- 打赏
- 举报
我有引用的，只是我可能在调试时删除了，我现在重新引用还是会提示图标数据请求失败，只有个空的XY轴
Hello World, 2019-02-01
- 打赏
- 举报
你都没有引用jQuery，就使用$.ajax，当然是不行的
