Как отобразить строку [] для создания столбчатой диаграммы в Spring и jsp

Я хочу создать диаграмму столбца, я нахожу CanvasJS.Chart, чтобы создать диаграмму, но он принимает один элемент для создания диаграммы, поэтому мой вопрос как я могу использовать мои строку [] в CanvasJS.Chart для создания диаграммыКак отобразить строку [] для создания столбчатой диаграммы в Spring и jsp

значения и Nvalue получил от варианта выбора CheckBox

@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>

источник

2017-02-17 Alex

Почему это помечено тегом [tag: java]? – Okx

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

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

В результате получается массив ваших данных.

Пример:

<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>

источник

2017-02-17 15:25:13

@editor спасибо ... –

Создать класс для хранения значений пара, я использовал 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 в СПЯ

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

В конце концов вы хотите создать некоторые веб-службы RESTful вместо того, чтобы ставить логику JSP.

источник

2017-02-17 15:41:01 minus

Как отобразить строку [] для создания столбчатой ​​диаграммы в Spring и jsp

ответ

Смежные вопросы

Как отобразить строку [] для создания столбчатой диаграммы в Spring и jsp