CNode

【已解决】Highcharts 报表 怎么与node交互呢?

Hheixiaoshan发布于12 年前最后回复12 年前9 回复5654 浏览0 收藏

对于新人来说,很蛋疼的问题。Highcharts怎么跟后台的交互数据,或者说Highcharts怎么得到数据。 后台传前台ejs模板中是用foreach,而前台如果是JS,该怎么整呢?用Ajax? 哪位大神有相关的案例或者指点指点一下

查看回复

回复 (9)

K
kenticny#3·12 年前

如果使用EJS模板的话,可以将数据返回的页面中,然后在HC中直接调用就可以了 如果使用Ajax的话,可以用node写数据服务,返回的就是HC需要的json 然后在HC中使用Ajax请求服务,将数据填到HC的series下

X
xiuxu123#5·12 年前

直接在jquery的ajax的回调里面写就行了,

H
heixiaoshan#6·12 年前
引用 xiuxu123直接在jquery的ajax的回调里面写就行了,

转格式好麻烦 而且我是用get请求。 也就是一进页面就价值

K
kenticny#7·12 年前
引用 kenticny如果使用EJS模板的话,可以将数据返回的页面中,然后在HC中直接调用就可以了 如果使用Ajax的话,可以用node写数据服务,返回的就是HC需要的json 然后在HC中使用Ajax请求服务,将...

@heixiaoshan 就和在ejs里面调用其他传递的一样

node

res.render("view", {
    series: [100, 200, 300, 400]
});

ejs

<script>
$(function () {
    $('#container').highcharts({
        // ... 图形配置省略
        series: [{
            name: "Demo",
            data: <%= series %>
        }]
    });
});
<script>
M
MiguelValentine#8·12 年前

ajax交互方式

前端 $(document).ready(function(){ var getjson = $.ajax({url:"/api/sales-base-big",async:false}).responseText; $(".alovecakechart").highcharts({ chart: { type: 'column' }, title: { text: 'ALOVE+ 即时销售统计' }, xAxis: { categories: JSON.parse(getjson)['main'] }, yAxis: { title: { text: '销量' } }, series: [{ name: '销售总量', data: JSON.parse(getjson)['val'] }, { name: '有效量(产生价值)', data: JSON.parse(getjson)['val1'] }] }); })

后端 res.send({"main":arr,"val":val,"val1":val1})

参与回复
登录后即可参与回复。登录