如何在 ASP .net MVC 4 应用程序的 HTML5 中创建带有可点击选项的水平条形图？ [关闭]
Posted
技术标签:
【中文标题】如何在 ASP .net MVC 4 应用程序的 HTML5 中创建带有可点击选项的水平条形图？ [关闭]【英文标题】：How to create Horizontal Bar charts with clickable option in HTML5 in ASP .net MVC4 application? [closed] 【发布时间】：2013-06-17 08:10:44 【问题描述】：我需要一个 html5 中的水平条形图。功能应该如下：
条形图应使用满足 mvc4 概念的 HTML5 开发。如果我单击图表栏，则该栏应通过将其显示为图表在另一个页面中打开。它应该像组内的子组。所有条形图数据都应该从数据库中动态获取。建议我一些好的想法来实现这个概念。提前致谢。
【问题讨论】：
@Pandiyan，您可能需要付出更多的努力，并且可能要对社区的其他人更加尊重。这个问题听起来像我们其他人是你的员工，这是一个要求。 :) 使用“please”和“could you pleaseSuggest”会让这个问题听起来不那么苛刻。 【参考方案1】：你说：“我从不介意得到反对票。” ......我会给你贴上“不喜欢和别人玩”的标签:)
无论如何，有很多出色的代码可以制作您需要的图表，但您的关键是如何使用您的 MVC 控制器将这些代码注入您的视图。这是一篇关于如何做到这一点的好文章：http://www.dotnetcurry.com/ShowArticle.aspx?ID=822。
您不想使用图表插件？
好的，下面是 html 画布代码，它将绘制一个条形图并检测用户何时单击图表上的条形：http://jsfiddle.net/m1erickson/6vutD/
如果您想要的不仅仅是基本条形图，这里有一个开源图表代码，您可以根据需要拆开并使用：http://www.chartjs.org/
这是上面小提琴的代码：
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body background-color: ivory;
canvasborder:1px solid red;
</style>
<script>
$(function()
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var barWidth=30;
var barSpacing=15;
var leftMargin=20;
var bars=[]
bars.push(height:150, color:"blue", x:null,y:null,right:null,bottom:null);
bars.push(height:75, color:"green", x:null,y:null,right:null,bottom:null);
bars.push(height:125, color:"gold", x:null,y:null,right:null,bottom:null);
for(var i=0;i<bars.length;i++)
bar=bars[i];
bar.x=leftMargin+(barWidth+barSpacing)*i;
bar.y=canvas.height-bar.height;
bar.width=barWidth;
bar.right=bar.x+barWidth;
bar.bottom=canvas.height;
drawBarchart();
function drawBarchart()
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.rect(0,0,canvas.width,canvas.height);
ctx.fillStyle="skyblue";
ctx.fill();
for(var i=0;i<bars.length;i++)
bar=bars[i];
ctx.beginPath();
ctx.rect(bar.x,bar.y,bar.width,bar.height);
ctx.fillStyle=bar.color;
ctx.fill();
ctx.stroke()
function handleMouseDown(e)
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
for(var i=0;i<bars.length;i++)
var bar=bars[i];
if(mouseX>=bar.x
&& mouseX<=bar.right
&& mouseY>=bar.y
&& mouseY<=bar.bottom)
alert("Clicked on ["+bar.color.toUpperCase()+"] so open another chart!");
$("#canvas").mousedown(function(e)handleMouseDown(e););
); // end $(function());
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
【讨论】：
【参考方案2】：这看起来很有用。无需插件。
http://g.raphaeljs.com/
还有很多其他的库可以用来创建 html 图表。只需使用 Google 并寻找符合您要求的。
【讨论】：
以上是关于如何在 ASP .net MVC 4 应用程序的 HTML5 中创建带有可点击选项的水平条形图？ [关闭]的主要内容，如果未能解决你的问题，请参考以下文章
我如何在 ASP.Net Core 2.1 mvc 应用程序中包含 System.Identitymodel 4.0
大型查询如何在 C#/ASP.NET MVC 4 部分中返回结果
ASP.NET MVC 4 的 Windows 身份验证 - 它是如何工作的，如何测试它
如何在 ASP .net MVC 4 应用程序的 HTML5 中创建带有可点击选项的水平条形图？ [关闭]
如何使用 .Net 4.0 中包含的 HttpClient 类将文件上传到在 IIS Express 中运行的 Asp.Net MVC 4.0 操作