使用页面上的文本框中的值更新Shield UI图表

时间:2013-07-18 12:23:26

标签: shieldui

我在页面上使用Shield UI图表,用户可以在该页面上输入3个值,这些值在图表上显示。我有一个触发事件的按钮。这是我的代码:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"  type="text/css"  href="http://www.shieldui.com/shared/components/latest/chart/css/shield-chart.min.css">
<script type="text/javascript"  src="http://www.shieldui.com/shared/components/latest/chart/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/chart/js/shield-chart.all.min.js"></script> 
<script>
function myFunction()
{
    var containter = $("#chart").swidget();
    var info = new Array();
    info[0]=parseFloat(document.getElementById("a").value);
    info[1]=parseFloat(document.getElementById("b").value);
    info[2]=parseFloat(document.getElementById("c").value);
    containter.destroy();
    $("#chart").shieldChart(
        {
            seriesSettings: {
                line: {
                    applyAnimation: {
                        duration: 0
                    },
                    pointMark: {
                        enabled: false
                    }
                }
            },
            tooltipSettings: {
                enabled: false
            },
            exportOptions:
            {
                image: false,
                print: false
            },

            axisX: {
                min: 0,
                max: 5
            },

            primaryHeader: {
                text: "Chart"
            },
            dataSeries: [
                {
                    seriesType: 'bar',
                    collectionAlias: 'chart',
                    data: [info[0],info[1],info[2]]
                }
            ]
        }
        );
}
</script>
</head>
<body>

<button onclick="myFunction()">Refresh Chart</button>
    <table>
        <tr>
            <td>
                <div id="chart" style="width: 300px; height: 300px; margin: auto;"></div>
            </td>
        </tr>
    </table>
<p id="demo"></p>

<input type=text id="a" value='123'>Value A</input>
<input type=text id="b" value='23'>Value B</input>
<input type=text id="c" value='3'>Value C</input>
</body>
</html>

但是有一些错误会阻止显示值。实际上整个图表都不会显示。哪里可能是我的错?

1 个答案:

答案 0 :(得分:1)

您正在制作的一个错误可以通过两种方式解决: 1.您可以删除

 containter.destroy();

语句。因此,您不会重新创建现有图表,而是每次按下按钮时都会创建一个新图表。

  1. 您可以保留上述声明,但您需要放置此代码

        $(document).ready(function(){         var info = new Array();         信息[0] = parseFloat(的document.getElementById( “a”)的值。);         信息[1] = parseFloat(的document.getElementById( “B”)的值。);         信息[2] = parseFloat(的document.getElementById( “C”)值。);
        $("#chart").shieldChart({
            exportOptions:
                  {
                      image: false,
                      print: false
                  },
            tooltipSettings: {
                enabled: false
            },
            seriesSettings: {
                line: {
                    applyAnimation: {
                        duration: 0
                    },
                    pointMark: {
                        enabled: false
                    }
                }
            },
            axisX: {
                min: 0,
                max: 5
            },
    
            primaryHeader: {
                text: "Chart"
            },
    
            dataSeries: [
                {
                    seriesType: 'bar',
                    collectionAlias: 'Chart',
                    data: [info[0],info[1],info[2]]
                }
            ]
        });
    
    });
    
  2. 所以你已经有一个图表可以销毁和重新创建,你可以在第一次加载页面时显示数据。