Создание асинхронного Shield UI JavaScript Chart и привязка данных

Попробовав несколько способов решить проблему, я решил обратиться за помощью. Дело в том, что я предоставляю информацию на веб-сайте, который пользователи в большинстве случаев не выглядят слишком много. С другой стороны, эта информация должна быть на расстоянии одного клика, если это необходимо. Поэтому я использую JavaScript-диаграмму Shield UI, которая привязывается к удаленным данным. Мне нужно инициализировать диаграмму, а не показывать данные. Это должно быть отложено до (и если), пользователь нажимает на график. Есть ли способ связать данные позже (асинхронно). Как этого достичь? Ниже приведен код, над которым я работал, для целей тестирования это локальные данные.

 <!DOCTYPE html>
<html>
<head>
<title></title>

<meta charset="utf-8" />

 <link rel="stylesheet" type="text/css" href="../../../css/shieldchart.css" />

<script src="../../../../external/jquery-1.8.2.min.js" type="text/javascript">//</script>
<script src="../../../../external/jquery.mousewheel/jquery.mousewheel.js" type="text/javascript">//</script>
<script src="../../../../external/canvg-1.2/rgbcolor.js" type="text/javascript">//</script>
<script src="../../../../external/canvg-1.2/canvg.js" type="text/javascript">//</script>
<script src="../../../../external/globalize/globalize.js" type="text/javascript">//</script>

<script src="../../../../common/core.js" type="text/javascript">//</script>

<script src="../../../js/shieldchart.js" type="text/javascript">//</script>

</head>
<body>

<div id="container" style="width: 600px; height: 400px; margin: auto;"></div>

<script type="text/javascript">
    $(document).ready(function () {

        var Information= [12,22,22,12,32,44,34 ];      


        $("#container").shieldChart({
        events: {
            seriesClick: function pointSelectHandler(args) {
        var containterproducts = $("#container").swidget();
        containterproducts.destroy();
        $("#container").shieldChart({

            exportOptions:
                  {
                      image: false,
                      print: false
                  },          
            primaryHeader: {
                text: "Electricity prices"
            },

            dataSeries: [
                {
                    seriesType: 'pie',
                    collectionAlias: "User Information",
                    data: Information
                },
            ]
        });                    
            }
        },
            exportOptions:
                  {
                      image: false,
                      print: false
                  },          
            primaryHeader: {
                text: "Click to show data"
            },

        });
    });

Источник

1 ответ

Вы на правильном пути, чтобы решить проблему. Сначала вы создаете диаграмму, которая не содержит данных, и в конечном итоге привязываете ее к источнику данных. Однако вы не можете использовать событие seriesClick, поскольку у вас нет ни одной серии, по которой пользователь мог бы щелкнуть. Если вы хотите использовать это событие, то вам нужно добавить, например, одно значение, скажем, 1, чтобы пользователь мог нажать на круговую диаграмму:

dataSeries: [
   {
      seriesType: 'pie',
      collectionAlias: "Logins",
         data: [1]
   },
]

или, альтернативно, вы можете иметь свой код и изменять только используемое событие:

click: function pointSelectHandler(args) {}

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

Это более удобная стратегия, потому что с типом круговой диаграммы легко визуализировать серию образцов данных. Но если вы используете диаграмму типов линий, пользователю будет сложнее узнать, что ему нужно щелкнуть ряд данных, чтобы получить фактические данные.

Источник
Другие вопросы по тегам