Question

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

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

Answer 1

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

 containter.destroy();

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

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

$（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]]
            }
        ]
    });

});

所以你已经有一个图表可以销毁和重新创建，你可以在第一次加载页面时显示数据。

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

1 个答案: