0

問題を解決するためにいくつかの方法を試した後、私は助けを求めることにしました. 問題は、ほとんどの場合、ユーザーがあまり見ない Web サイトで情報を提供することです。一方、この情報は、必要に応じてクリックするだけでアクセスできる必要があります。そのため、リモート データにバインドする 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