Создание диаграмм и привязка данных к пользовательскому интерфейсу асинхронного экрана на JavaScript

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

 <!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"
            },

        });
    });


javascript shieldui
person Thomas Baker    schedule 31.10.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

click: function pointSelectHandler(args) {}

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

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

person Ed Jankowski    schedule 01.11.2013