morris.js 其js代码如下,该怎么动态的更改这些数据呢? 100

这是代码,在前台<divid="morris-chart-donut"></div>这样调用就可以,但是我从php后台获取数据,然后想动态的改变{labe:值,value... 这是代码,在前台<div id="morris-chart-donut"></div> 这样调用就可以,但是我从php后台获取数据,然后想动态的改变 {labe:值,value:;},这个label值和value值,怎么动态的改变呢???

Morris.Donut({
element: 'morris-chart-donut',
data: [
{label: "手机平板", value: 42.7},
{label: "电脑办公", value: 8.3},
{label: "数码影音", value: 12.8},
{label: "美食天地", value: 12.8},
{label: "生活家电", value: 20.4},
{label: "潮流新品", value: 10}

],
formatter: function (y) { return y + "%" ;}
});
展开
 我来答
藤原子大雄
2018-08-05 · TA获得超过7195个赞
知道大有可为答主
回答量:6977
采纳率:82%
帮助的人:1736万
展开全部

步骤

在本文中,我们将在 Asp.Net 创建一个简单的 Restful API,并整合 Swashbuckle 和 Swagger UI。本文分为三部分。

  • 创建 Asp.Net Web API项目

  • 通过实体数据模型 (.edmx) 和 Scaffold API控件连接到 Sql Server数据库

  • 整合 Swashbuckle/Swagger UI框架以描述 API 操作

  • 创建 Asp.Net Web API 项目
  • 首先创建一个新的“Asp.Net Web应用”,将其命名为“Swagger”

    从模板中选择 Web API,也就是说, Visual Studio将把 MVC、与Web API相关的文件夹和核心引用添加到我们的应用中。然后,点击“更改权限”,选择“无权限”后点击OK。通过以上设置,我们将跳过项目中与账户相关的控件和视图。

    执行 Visual Studio 启动程序后,项目文档和文件夹的结构如下:

    我们将在应用 App_Start 文件夹中将 MVC 控件的路径设置为 RouteConfig.cs ,将Web API控件的路径设置为 WebApiConfig.cs 。

    注:你可以在该区域看到“帮助页”文件夹。此文件夹将包含 Visual Studio 生成的模型、视图、控件和其他与帮助相关的文档,以描述Web API帮助。我们将在下文对这一问题进行分析。

    如果查看 NuGet 包管理器中的“已安装包”,你会发现项目中已经添加了“Microsoft Asp.Net Web API 2.2 帮助页”包、Razor包和核心包。

  • 通过实体数据模型(edmx)和Scaffold API控件连接到 SQL Server数据库
  • 我们先通过实体数据模型将应用连接到数据库表。首先,创建新的“ADO.NET实体数据模型”项目,在模型文件夹中将其命名为 “SwaggerModel”。

    附件为在数据库中创建新表格的脚本文件。

    从向导中选择“数据库中的 EF Designer”,并点击“下一步”连接到数据库服务器(此处即为SQL Server)。

    在实体数据模型向导页面中,选择连接到 Sql Server,并将连接字符串命名为“SwaggerConStr”,该字符串将保存在web.config文档中。

    点击“下一步”,选择实体框架版本(即本文中的6.x)。点击“下一步”,选择EDMX公司表,将其保存在EDMX文档中。

    选择表格,点击“完成”按键,最后会生成POCO类“Company.cs”和数据库配置指令类“SwaggerConStr” 。

    现在已经创建了实体数据模型和配置指令,那么我们可以通过Visual Studio支架特性创建新的API控件。但为了充分利用配置指令,在给 API 控件建立支架前,我们应先建立应用。即在建立支架之前,删除控件文件夹中现有的ValuesController.cs。

    点击控件文件夹,并添加“控件…”,即打开带有各种支架选项的“添加支架”窗口,选择“Web API 2 Controller with actions, using Entity Framework(带有动作、使用实体框架的Web API 2控件”,然后点击“添加”。

    在添加控件窗口中选择模型(即本文的Company.cs)以及数据配置指令类(SwaggerConStr.cs)。将新控件命名为“CompanyController.cs”,并点击“添加”。

    为每个http 动作(GET, PUT, POST and DELETE)操作创建的新控件如下:

    建立和运行应用后,可看到如下截图。你可以在用户界面顶端导航中看到“API”链接,点击后进入“Asp.Net API帮助页”页面。帮助主页如下所示。

    注:为了检查API,应在url中添加“/api/company”,并在浏览器中提交。

    点击任意操作链接后将显示更多详情,如带有URI、本体参数的“请求”信息、“响应”类型、json或xml等格式。下图为GET方法截图:

    虽然Visual Studio团队花费了很大精力为这项服务的消费者展示Web API帮助,但这项服务的薄弱点是用户界面过于基础,而且我们无法使用动作方法。这正是有必要使用Swagger UI & Swashbuckle的原因。

  • 整合 Swashbuckle/Swagger UI,以描绘API操作
  • 由Swagger网站可知,Swagger是展示RESTful API的简单而强大的方法,它为此API提供了强大的接口。

    由Swashbuckle GitHub可知,Swashbuckle可将Swagger无缝添加到WebApi中!将ApiExplorer与Swagger/swagge-ui 合并可以给 API 用户带来丰富的探索、文件和操作体验。除Swagger生成器外,Swashbuckle还包含嵌入式版本的swagger-ui。

  • 将Swashbuckle添加到 Web API中
  • 点击进入“ Manage NuGet Packages…(管理NuGet包)”,并在线搜索“Swashbuckle”。在列表中选择Richard Morris创建的5.2.2版 “Swashbuckle - Swagger for Web API”,点击安装。

    这一操作会将引用添加到“Swashbuckle - Swagger for Web API”与“Swashbuckle.Core - Swagger for Web API”中。且后者会在经过依赖检查后添加到我们的项目中。在packages.config中也是如此。

    [HTML] 纯文本查看 复制代码

    ?

    12
  •    
  • <package id="Swashbuckle" version="5.2.2" targetFramework="net45" /><package id="Swashbuckle.Core" version="5.2.2" targetFramework="net45" />
  •    

  • 成功安装后,我们可以在App_Start文件夹中看到一个新的“SwaggerConfig.cs”配置文档,所有Swagger相关配置都会在此进行设置。

    为了能直接链接到Swagger API 接口,应将下列所有动作链接到“_Layout.cshtml”页面的顶部导航栏。

  • [HTML] 纯文本查看 复制代码

    ?

    1   <li>@Html.ActionLink("Swagger Help", "", "Swagger", new { area = "" }, null)</li>   

郦以B2
2018-08-05
知道答主
回答量:31
采纳率:0%
帮助的人:3.2万
展开全部
$.ajax({
url: "ajax/morris.php",
cache: false,
type: "POST",
data: {sVar: '1'},
dataType: "json",
timeout:3000,
success : function (data) {
Morris.Line({
element: 'TheElementName',
data: data,
xkey: 'someID',
ykeys: ['R1', 'R2', 'R3', 'R4', 'R5', 'R6'],
labels: ['n1', 'n2', 'n3', 'n4', 'n5', 'n6'],
hideHover: 'auto',
resize: true
});
},
error : function (xmlHttpRequest, textStatus, errorThrown) {
alert("Error " + errorThrown);
if(textStatus==='timeout')
alert("request timed out");
}
});
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
heli730
2015-10-27 · TA获得超过748个赞
知道小有建树答主
回答量:628
采纳率:0%
帮助的人:323万
展开全部
可以直接用php输出这段js,里边的你要动态改变的东西用php调用出来,或者用ajax和php后台的数据进行交互。至于怎么使用,百度下到处都是,建议用ajax实现
追问
我用的是thinkphp,在控制器里,直接把数据给$this->assign(),赋值到模板,也可以处理成json格式,输出,问题是 输出到模板以后,怎么把这些值,赋值到data: [
{label: "手机平板", value: 42.7},
{label: "电脑办公", value: 8.3},
],

这里来????????
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式