Question

我想创建一个柱形图，我发现 CanvasJS.Chart 来创建一个图表，但它接受一个元素来创建一个图表，所以我的问题是如何使用我的 CanvasJS.Chart中的字符串[] ，用于创建图表

从复选框选择选项

收到

值和 Nvalue

    @RequestParam(value = "value", required = false) String[] value)
   @RequestParam(value = "Nvalue", required = false) String[] Nvalue)


    String names[] = value;
    String number[] = Nvalue;


    model.addAttribute("names", names);
   model.addAttribute("umber", number);





<!DOCTYPE HTML>
<html>

<head>  
 <title>Basic HTML5 Column Chart </title>
  <script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
        text: "Top Oil Reserves"    
      },
      animationEnabled: true,
      axisY: {
        title: "Reserves(MMbbl)"
      },
      legend: {
        verticalAlign: "bottom",
        horizontalAlign: "center"
      },
      theme: "theme2",
      data: [

      {        
        type: "column",  
        showInLegend: true, 
        legendMarkerColor: "grey",
        legendText: "MMbbl = one million barrels",
        dataPoints: [      
        {y: 297571, label: "Venezuela"}
        ]
      }   
      ]
    });

    chart.render();
  }
  </script>
  <script  src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
</head>
  <body>
  <div id="chartContainer" style="height: 300px; width: 100%;">
    </div>
  </body>
</html>

Answer 1

var names=["one"," two"," tree"];
var values=[10, 20, 30];

var result=names.map(function(name,id){
  return  {y:values[id]||0, label:name};
  });

结果是你的dataPoints数组。

示例：

＆＃13;
＆＃13;
<html> <head> <title>Basic HTML5 Column Chart </title> <script type="text/javascript"> window.onload = function() { var names = ["one", " two", " tree"]; var values = [10, 20, 30]; var result = names.map(function(name, id) { return { y: values[id] || 0, label: name }; }); var chart = new CanvasJS.Chart("chartContainer", { title: { text: "Top Oil Reserves" }, animationEnabled: true, axisY: { title: "Reserves(MMbbl)" }, legend: { verticalAlign: "bottom", horizontalAlign: "center" }, theme: "theme2", data: [ { type: "column", showInLegend: true, legendMarkerColor: "grey", legendText: "MMbbl = one million barrels", dataPoints: result } ] }); chart.render(); } </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script> </head> <body> <div id="chartContainer" style="height: 300px; width: 100%;"> </div> </body> </html>
＆＃13;
＆＃13;
＆＃13;

Answer 2

创建一个用于保存值对的类，我使用Gson将java对象转换为json字符串。

class DataPoint {
    private String y;
    private String label;
    public DataPoint(String y, String label) {
        super();
        this.y = y;
        this.label = label;
    }
}

使用静态方法创建一个辅助类，该方法将数组对转换为jsonString

public class MyHelperClass {
    public static String toJson(String[] labels, String[] nums) {
        Gson gson = new Gson();
        List<DataPoint> data = new ArrayList<DataPoint>();
        for (int i = 0; i < nums.length; i++) {
            DataPoint dp = new DataPoint(nums[i], labels[i]);
            data.add(dp);
        }

        String jsonData = gson.toJson(data);
        return jsonData;
    }
}

将jsonString插入jsp

  {        
    type: "column",  
    showInLegend: true, 
    legendMarkerColor: "grey",
    legendText: "MMbbl = one million barrels",
    dataPoints: <%= MyHelperClass.toJson(arrayA,arrayB) %>
  }

最终，您将需要创建一些RESTful Web服务，而不是将逻辑插入JSP。

如何在Spring和jsp中显示用于创建柱形图的字符串[]

2 个答案: