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

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需要在哪里获取，麻烦啦

回到顶部