前端用echart可视化数据的,我用ajax取数据库数据不知道怎么放到echart 里面 ,平台vs2017 asp.net MVC
发布于 1 个月前 作者 ws0906 176 次浏览 来自 问答

https://blog.csdn.net/qq_38737992/article/details/89042164
用的是这个csdn里面,Echarts 绘制关系图(知识图谱可视化),数据在echart写的死的,我想用ajax取数据库数据显示在这个例子里面的引力图里面,但是数据可以取出来不知道怎么放进去,求解

我套用后的代码。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>@ViewBag.Title</title> <script type="text/javascript" src="@Url.Content("/Scripts/echarts-all-3.js")"></script> @* 引用 *@ <script type="text/javascript" src="@Url.Content("/Scripts/jquery-3.3.1.js")"></script> </head> <body> <form οnsubmit="layer.load('请求提交中')" action="/Home/GetPeople" method="get">
    <input type="text" /><button type="submit">查询</button>
    <table></table>
</form>
<div><button name="nb" id="nb" onclick="getData();">按钮</button></div>
<div id="main" style="width:1000px;height:800px"></div>
</body> </html> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); var categories = []; for (var i = 0; i < 2; i++) { categories[i] = { name: '类目' + i }; } options = { // 图的标题 title: { text: 'ECharts 关系图' }, // 提示框的配置 tooltip: { formatter: function (x) { return x.data.des; } }, // 工具箱 toolbox: { // 显示工具箱 show: true, feature: { mark: { show: true }, // 还原 restore: { show: true }, // 保存为图片 saveAsImage: { show: true } } }, legend: [{ // selectedMode: 'single', data: categories.map(function (a) { return a.name; }) }], series: [{ type: 'graph', // 类型:关系图 layout: 'force', //图的布局,类型为力导图 symbolSize: 40, // 调整节点的大小 roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启 edgeSymbol: ['circle', 'arrow'], edgeSymbolSize: [2, 10], edgeLabel: { normal: { textStyle: { fontSize: 20 } } }, force: { repulsion: 2500, edgeLength: [10, 50] }, draggable: true, lineStyle: { normal: { width: 2, color: '#4b565b', } }, edgeLabel: { normal: { show: true, formatter: function (x) { return x.data.name; } } }, label: { normal: { show: true, textStyle: {} } },
        // 数据
        //data: [{
        //    name: 'node01',
        //    des: 'node1',
        //    symbolSize: 70,
        //    category: 0,
        //}, {
        //    name: 'node02',
        //    des: 'nodedes02',
        //    symbolSize: 50,
        //    category: 1,
        //}, {
        //    name: 'node03',
        //    des: 'nodedes3',
        //    symbolSize: 50,
        //    category: 1,
        //}, {
        //    name: 'node04',
        //    des: 'nodedes04',
        //    symbolSize: 50,
        //    category: 1,
        //}, {
        //    name: 'node05',
        //    des: 'nodedes05',
        //    symbolSize: 50,
        //    category: 1,
        //}],
        //links: [{
        //    source: 'node01',
        //    target: 'node02',
        //    name: 'link01',
        //    des: 'link01des'
        //}, {
        //    source: 'node01',
        //    target: 'node03',
        //    name: 'link02',
        //    des: 'link02des'
        //}, {
        //    source: 'node01',
        //    target: 'node04',
        //    name: 'link03',
        //    des: 'link03des'
        //}, {
        //    source: 'node01',
        //    target: 'node05',
        //    name: 'link04',
        //    des: 'link05des'
        //}],
        data: [],
        categories: categories,
    }]
};
myChart.setOption(options);
<script> @* ajax 取数据*@ function getData() { $.ajax({ type: "POST", async: false, contentType: 'application/json; charset=utf-8',    //如果不指定该参数,总是返回跳到error部分,而无法执行success部分 url: "/Home/GetPeople",                  //调用后台Webservice dataType: "json",                                                 //返回数据形式为json success: function (result) { alert("qwwq"+result) var obj = JSON.parse(result); //一定要注意大小写,让它跟后台返回的JSON语句中一致。result.d.Data是字串数据,需要重新转换成JSON                                                 if (result) { //将返回的category和series对象赋值给options对象内的category和series //因为xAxis是一个数组 这里需要是xAxis[i]的形式 //options.yAxis[0].data = obj.value; //options.xAxis[0].data = obj.category; //options.series = obj.series; //options.legend.data = obj.legend; for (var i = 0; i < result.length; i++) { var str = new Object(); str.value = result[i]; } //options.series[0].data = str; //options.title = result[10]; //myChart.hideLoading(); //myChart.setOption({ //加载数据图表 // title: { // text: '关系图' // }, // series: [{ // // 根据名字对应到相应的系列 // name: '销量', // data: str.value // }] //}); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.responseText); } }); } </script>

这个是后台的去数据库的数据,简单的取people类名字 public ActionResult GetPeople(String name) { ViewBag.Message = “Your contact page.”; Class1 n = new Class1(“bolt://localhost:7687”, “neo4j”, “0906”); List<String> people = n.GetPeople(); //ViewBag.People = people; //return people; JavaScriptSerializer jss = new JavaScriptSerializer(); string stringList = jss.Serialize(people);//将当前的List对象集合转换成字符串(JSON格式) //【3】返回JSON格式数据 来自Http的所有Get方式都能响应 return Json(stringList, JsonRequestBehavior.AllowGet); }

可以alert(“qwwq”+result) 显示数据库里面people类名字,但是无法填充到echart样例里面的引力图理 求解

2 回复

前端用js取到数据后,再用js 拼装成Echart 要求的格式的json,就行了

老师您好,我发现在.net平台对neo4j操作的资料太少了,仅有您22节视频给的几个的demo,在做可视化测试的时候对cypher语句操作显得有点力不从心,发现有个Neo4jRestNet .NET https://github.com/SepiaGroup/Neo4jRestNet ,在中文手册第五章看见的,demo里面吧cypher的一系列操作都有,想请问一下您,引用里面的Neo4jRestNet需要在哪里获取,麻烦啦

回到顶部