0

在尝试了几种方法来解决这个问题后，我决定寻求一些帮助。问题是，我在网站上提供信息，在大多数情况下，用户不会看太多。另一方面，如果需要，这些信息需要点击一下。所以我使用了一个 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"
            },

        });
    });

4

1 回答 1

0

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

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

或者，您可以使用您的代码并且只更改使用的事件：

click: function pointSelectHandler(args) {}

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

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

于 2013-11-01T14:37:46.770 回答