1

我在页面上使用 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>

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

4

1 回答 1

1

这是您犯的一个错误，可以通过 2 种方式解决： 1. 您可以删除 

 containter.destroy();

陈述。因此，您不会重新创建现有图表，而是在每次按下按钮时创建一个新图表。

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

    $(document).ready(function () { 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); 
        $("#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]]
            }
        ]
    });

});

因此，您将已经拥有一个要销毁和重新创建的图表，并且您将能够显示第一次加载页面时的数据。

于 2013-07-18T15:20:03.543 回答