Question

我一直在互联网上搜索使用html和css制作流程图（饼图和垂直）的方法，但我没有找到任何东西。有人用html和css制作这些类型的图表可以帮到我吗？

最后我找到了一种方法来做这个图表，但我希望这些值是在servlet端计算的值。对于垂直饼图是工作但是饼图没有（没有显示）。我也希望比例在我的最大值（（＆＃34; $ {sumC}＆＃34;）= 2000），现在是60。任何人都可以解决这个问题吗？非常感谢你！

这是我的servlet代码：

public class ListaCumparaturi extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
              response.setContentType("text/html;charset=UTF-8");


              try{
                    ...
                    request.setAttribute("sumG", sumG);
                    request.setAttribute("sumCa", sumCa);
                    request.setAttribute("sumP", sumP);
                    request.setAttribute("sumC", sumC); 

     }
               catch (Exception e2)
               {
                 e2.printStackTrace();
               }
               finally
               {
                 out.close();
               }
            }
}

这是js代码：

     <form action= "listacumparaturi" method="get">     
                    <canvas width="1000" height="1000" id="myCanvas"></canvas>


                    var x=  "${sumC}" ; 
            var y= "${sumG}" ; var z= "${sumP}" ; var w=  "${sumCa}" ;   total = "${sumT}";


      var vertical = {
        Calorii: x,
        Grasimi: y,
        Proteine: z,
        Carbo: w
      };
      var data = Object.keys(vertical);


      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      ctx.fillStyle = "blue";


        total = "${sumT}";



      color = ['red', 'blue', 'yellow','green','black'];
      start = 0;

              for (var i = 0; i < data.length; i++) {

                ctx.fillRect((i * 60) + 50, 100, 10, -(vertical[data[i]]));
                ctx.font = "9px Arial";
                ctx.fillText(data[i], (i * 60) + 51, 112);
                ctx.fillText((700 * i), 30, ((20 * -i) + 100));

                ctx.beginPath();
                ctx.moveTo(600, 150);
                ctx.arc(600, 150, 150, start, start +
                  (Math.PI * 2 * (vertical[data[i]] / total)), false);
                ctx.lineTo(600, 150);
                ctx.fillStyle = color[i];
                ctx.fill();
                start += Math.PI * 2 * (vertical[data[i]] / total);


              }
    </script>
                    </form>

Answer 1

可以使用HTML和CSS3画布构建自定义图表。

我创建了一个示例代码库URL以供参考。

http://codepen.io/nagasai/pen/EyjJLy

您可以更新自己的数据并从那里构建起始图表

HTML：

使用Javascript：

      //sample data object

      var vertical = {
        a: 10,
        b: 20,
        c: 40
      };
      var data = Object.keys(vertical);

      total = 0;
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      ctx.fillStyle = "blue";
      for (var i = 0; i < data.length; i++) {

        total = total + vertical[data[i]];

      }

      color = ['red', 'blue', 'yellow'];
      start = 0;

      for (var i = 0; i < data.length; i++) {

        ctx.fillRect((i * 60) + 50, 100, 10, -(vertical[data[i]]));
        ctx.font = "9px Arial";
        ctx.fillText(data[i], (i * 60) + 51, 112);
        ctx.fillText((20 * i), 30, ((20 * -i) + 100));

        ctx.beginPath();
        ctx.moveTo(600, 150);
        ctx.arc(600, 150, 150, start, start +
          (Math.PI * 2 * (vertical[data[i]] / total)), false);
        ctx.lineTo(600, 150);
        ctx.fillStyle = color[i];
        ctx.fill();
        start += Math.PI * 2 * (vertical[data[i]] / total);
      }

希望这对你有帮助:)）

流程图（饼图和垂直图）

1 个答案: