异步 Shield UI JavaScript 图表创建和数据绑定答案

【问题标题】：Asynchronous Shield UI JavaScript Chart creation and data binding异步 Shield UI JavaScript 图表创建和数据绑定
【发布时间】：2013-10-31 15:04:25
【问题描述】：

在尝试了几种解决问题的方法后，我决定寻求帮助。问题是，我在网站上提供信息，在大多数情况下用户不会看太多。另一方面，如果需要，这些信息需要点击一下。所以我使用了一个 Shield UI JavaScript 图表，它绑定到远程数据。我需要的是初始化图表，而不是显示数据。这需要推迟到（如果）用户点击图表。有没有办法稍后（异步）绑定数据。如何做到这一点？以下是我处理的一些代码，出于测试目的，它是本地数据。

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

【解决方案1】：

您正在以正确的方式解决问题。您最初创建一个不包含数据的图表并最终将其绑定到数据源。但是，您可能不会使用 seriesClick 事件，因为您没有任何用户可以点击的系列。如果您想使用该事件，则需要添加一个值，例如 1，以便用户能够点击饼图：

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

或者，您可以拥有自己的代码，只更改使用的事件：

click: function pointSelectHandler(args) {}

在这种情况下，您将在用户单击图表时显示数据，并且不需要任何系列。

这是更舒适的策略，因为使用饼图类型可以轻松可视化示例数据系列。但是，如果您使用的是折线图，则用户要知道他需要单击数据系列才能获取实际数据会更加复杂。

【讨论】：