-11

I need a Horizontal bar chart in html5. The functionality should be as folows:

Bar chart should be developed in HTML5 with satisfying mvc4 concept. If i click a bar of chart, the bar should open in another page by displaying that as a graph. Its should be like subgroups within the group. All the bar charts data should dynamically get from the database. Suggest me some good ideas to implement this concept. Thanks in advance.

4

2 回答 2

2

你说：“我从不介意得到反对票。” ……我会给你贴上“不喜欢和别人玩”的标签：）

无论如何，有很多出色的代码可以制作您需要的图表，但您的关键是如何使用您的 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; }
    canvas{border: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>
于 2013-06-20T17:53:54.103 回答
2

这看起来很有用。不需要插件。

http://g.raphaeljs.com/

还有很多其他的库可以用来创建 html 图表。只需使用谷歌并寻找符合您要求的。

于 2013-06-20T13:37:29.730 回答