Перекрывающиеся столбцы гистограммы, нарисованные с помощью CanvasJS - PullRequest
Новая
       11

Перекрывающиеся столбцы гистограммы, нарисованные с помощью CanvasJS

0 голосов
/ 21 мая 2019

Столбцы добавляются в разные метки, однако, когда я отключаю все столбцы из легенды и включаю каждый столбец отдельно, столбцу присваивается его правильная метка. Рассмотрим 2 изображения здесь .

На первом изображении показаны фильмы и автомобильные столбцы, присвоенные этикетке США, однако это неверно, однако столбец фильмов должен быть присвоен британской этикетке. Если я скрываю автомобильную колонку от легенды, метка колонки фильмов отображается правильно, как на втором изображении.

Вот мой файл chart.jsp. Он получает массив точек данных от службы RESTful, я уверен, что массив получен правильно. 

<!-- chart.jsp-->
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
         pageEncoding="ISO-8859-1" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type="text/javascript">
        window.onload = function () {

            var yValue;
            var label;
            var color;                              //color is column
            var cnt = -1;
            var countries = "${countries}";
            var datas = [];                         //holds data points for later use by the chart

            <c:forEach items="${dataPointsList}" var="dataPoints" varStatus="loop">
            var bool = true;                        //bool to add column only once, see next comment
            cnt = cnt + 1;
            <c:forEach items="${dataPoints}" var="dataPoint">

            yValue = parseInt("${dataPoint.y}");
            label = "${dataPoint.label}";
            color = "${dataPoint.color}";

            if(bool === true) {
                bool = false;
                datas.push({                       //adding new column to datas only once, column name changes every iteration for parent foreach
                    type: "column",
                    name: color,
                    legendText: color,
                    showInLegend: true,
                    axisYType: "secondary",
                    dataPoints: []
                });
            }

            datas[cnt].dataPoints.push({            //adding a label and a value to current column
                label: label,
                y: yValue
            });

            </c:forEach>
            </c:forEach>

            var chart = new CanvasJS.Chart("chartContainer", {
                exportEnabled: true,
                animationEnabled: true,
                title: {
                    text: "Analysis by country and category"
                },
                subtitles: [{
                    text: "Click Legend to Hide or Unhide Data Series"
                }],
                axisX: {
                    title: "country",
                },
                axisY: {},
                toolTip: {
                    shared: true
                },
                legend: {
                    cursor:"pointer",
                    itemclick: toggleDataSeries
                },
                data: datas                             //assigning chart data with datas
            });

            chart.render();

            function toggleDataSeries(e) {
                if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                } else {
                    e.dataSeries.visible = true;
                }
                e.chart.render();
            }

        }
    </script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

Я попытался добавить данные на график вручную, и это сработало, как на этом изображении.

Код: 

<!-- chart.jsp-->
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
         pageEncoding="ISO-8859-1" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type="text/javascript">
        window.onload = function () {

            var chart = new CanvasJS.Chart("chartContainer", {
                exportEnabled: true,
                animationEnabled: true,
                title: {
                    text: "Analysis by country and category"
                },
                subtitles: [{
                    text: "Click Legend to Hide or Unhide Data Series"
                }],
                axisX: {
                    title: "country",
                },
                axisY: {},
                toolTip: {
                    shared: true
                },
                legend: {
                    cursor:"pointer",
                    itemclick: toggleDataSeries
                },
                data: [
                    {
                        type: "column",
                        dataPoints: [
                            { y: 10, label: "Apples" },
                            { y: 15, label: "Mangos" },
                            { y: 25, label: "Oranges" },
                            { y: 30, label: "Grapes" },
                            { y: 28, label: "Bananas" }
                        ]
                    }
                ]
            });

            chart.render();

            function toggleDataSeries(e) {
                if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                } else {
                    e.dataSeries.visible = true;
                }
                e.chart.render();
            }

        }
    </script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

Я понятия не имею, что не работает, любая помощь приветствуется. Извините, если мой вопрос слишком длинный или плохо отформатирован.

...