首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何从通过控制器发送的结果中动态填充morris.js图表?

从通过控制器发送的结果中动态填充morris.js图表的方法如下:

  1. 首先,确保你已经引入了morris.js库和相关的依赖文件(如jQuery)。
  2. 在HTML页面中创建一个容器元素,用于显示图表。例如:
代码语言:txt
复制
<div id="chart-container"></div>
  1. 在控制器中,获取需要填充到图表中的数据,并将其转换为适合morris.js的格式。通常,这些数据应该是一个包含多个对象的数组,每个对象表示一个数据点,包含x轴和y轴的值。例如:
代码语言:txt
复制
var data = [
  { x: '2019-01-01', y: 100 },
  { x: '2019-02-01', y: 150 },
  { x: '2019-03-01', y: 200 },
  // ...
];
  1. 在控制器中,将数据转换为morris.js所需的格式,并将其作为JSON字符串发送给前端。可以使用JSON库或手动构建JSON字符串。例如:
代码语言:txt
复制
var jsonData = JSON.stringify(data);
return Json(jsonData);
  1. 在前端页面的JavaScript代码中,使用Ajax或其他方式获取控制器发送的JSON数据。例如:
代码语言:txt
复制
$.ajax({
  url: '/controller/action',
  method: 'GET',
  success: function(response) {
    var chartData = JSON.parse(response);
    // 在这里调用填充图表的函数
    fillChart(chartData);
  }
});
  1. 在前端页面的JavaScript代码中,编写一个函数来填充图表。使用morris.js提供的API来创建和更新图表。例如:
代码语言:txt
复制
function fillChart(data) {
  Morris.Line({
    element: 'chart-container',
    data: data,
    xkey: 'x',
    ykeys: ['y'],
    labels: ['Y'],
    // 可以根据需要设置其他配置选项
  });
}

以上步骤将从控制器发送的结果动态填充到morris.js图表中。请注意,这只是一个基本的示例,你可以根据自己的需求进行修改和扩展。

相关搜索:Laravel,如何通过从复选框发送多个值来使用ajax从控制器获取结果如何根据从三个子控制器获得的结果在父控制器中显示动态消息如何从postgresql中的函数获取返回表动态结果如何从spring rest控制器发送流中的文本块?如何通过makePostRequest()中的ajax调用发送文件,并通过控制器中的请求参数获取文件如何将动态添加的行值从angular发送到java控制器如何从link_to post调用控制器中的邮件发送操作如何从通过行中的按钮动态生成的表中复制行?如何从满足一定条件的动态数据中过滤结果如何在firebase中通过电子邮件发送密码重置的动态口令如何从beanshell post processor中设置Jmeter循环控制器中的动态值?如何将动态列表从DataTable返回到控制器中的视图?如何从具有多个条件选项的动态图表中对XPath进行web抓取?如何通过漂亮的python从google搜索结果中抓取嵌套div中的span如何将数据从我的数据库发送到laravel中的google图表api如何通过AJAX从数据库中填充数据并以表格的形式显示?如何通过命令放入"IN"子句中的条件从数据库中获取结果?如何通过ajax remote: rails中的true选项将属性数据发送到控制器如何从邮递员那里提取以zip文件形式发送的控制器中的文件?通过"POST“方法将数据从表单发送到控制器的问题。显示控制器中的print_r($request),而不是提供的数据
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

1分7秒

贴片式TF卡/贴片式SD卡如何在N32G4FR上移植FATFS,让SD NAND flash读写如飞

领券