Как показать информацию на графиках, используя jsp и Canvas JS? - PullRequest
Новая
       6

Как показать информацию на графиках, используя jsp и Canvas JS?

0 голосов
/ 29 февраля 2020

Мне нужно рисовать графики с данными моего sql сервера.

Итак, у меня есть мой сервлет, который выбирает все нужные мне данные и преобразует его в json, затем я пересылаю все данные в свой jsp.

я хочу показать информацию в виде имен в моем графике p ie.

это мой сервлет: 

PreparedStatement ps = c.prepareStatement("select SUM(ChiffreAffaire)as CA,M500_NOM from V502_client where Annee=?  and Mois=2 group by M500_NOM");
            ps.setString(1, name);
            ResultSet resultSet = ps.executeQuery();

    while(resultSet.next()){
        yVal = resultSet.getFloat("CA");
                nom=resultSet.getString("M500_NOM");
        map = new HashMap<Object,Object>(); map.put("x", nom);map.put("y",yVal); list.add(map);
        dataPoints = gsonObj.toJson(list);
    }  

            request.getSession().setAttribute("data", dataPoints); 
            RequestDispatcher rd = request.getRequestDispatcher("graph.jsp");
            rd.forward(request, response);

и это скрипт чтобы показать мой график: 

<script type="text/javascript">
<%     String shared1 = (String)request.getSession().getAttribute("data");%>

window.onload = function() { 


var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    exportEnabled: true,
    title: {
        text: "Représentation graphique"
    },
    data: [{
        type: "pie", //change type to bar, line, area, pie, etc
        showInLegend: "true",
        startAngle: 40,
        dataPoints: <%out.print(shared1);%>
    }]
});
chart.render();
}
</script>
<div id="chartContainer" style="height:370px; width:600px;"></div>

Результат этого показан как:

The result of this is shown like :

Я хочу быть таким:

1 Ответ

0 голосов
/ 29 февраля 2020

Попробуйте определить legendText в вашем наборе данных и указать, какое свойство содержит метку ('x' в вашем случае). 

data: [{
    type: "pie", 
    showInLegend: true,
    legendText: "{x}", 
    startAngle: 40,
    dataPoints: <%out.print(shared1);%>
}]

Обратите внимание, что каждая метка (x свойство) должна быть разной для pie диаграммы.

...