流程图（饼图和垂直）

Question

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

最后我找到了一种方法来制作这个图表，但我希望这些值是在 servlet 端计算的值。对于垂直饼图正在工作，但对于饼图没有（不显示）。另外我希望比例在我的最大值 (("${sumC}")=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 画布构建自定义图表。

我创建了一个示例 codepen 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);
      }

希望这对你有帮助:)