在jsrender模板中渲染画布图表

Question

我需要在jsrender模板中放置一个图表。可以渲染图表，但图表未定位在所需位置。目的是将图表放在下图中box1内的绿色矩形中。但是，它将始终放在底部红色矩形的位置。 我的代码是：

<script id="SampleTemplatewithChart" type="text/x-jsrender">

<div class="content">
    <header>
        <span><input type="text" name="daterange" value="03/20/2000 - 03/26/2000" style="text-align:center" size="25" /></span>
    </header>

    <div style="position:relative; top:-5px;">
        {{:"<scr" + "ipt>"}}
        var chart = new CanvasJS.Chart("chartContainerxx", {
        animationEnabled: true,
        title: {
        text: "QOS - Survey Result"
        },
        axisY: {
        title: "Response values",
        interval: 10
        },
        toolTip: {
        shared: true
        },
        data: [{
        type: "bar",
        name: "Avg. Score",
        toolTipContent: "< b > { label }</b> <br><span style='color:#4F81BC'>{name}</span>: {y}",
        dataPoints: [
        { y: 94, label: "Order Accuracy" },
        { y: 74, label: "Packaging" },
        { y: 80, label: "Quantity" },
        { y: 88, label: "Quality" },
        { y: 76, label: "Delivery" }
        ]
        },
        {
        type: "error",
        name: "Variability Range",
        toolTipContent: "<span style='color:#C0504E'>{name}</span>: {y[0]} - {y[1]}",
        dataPoints: [
        { y: [92, 98], label: "Order Accuracy" },
        { y: [70, 78], label: "Packaging" },
        { y: [78, 85], label: "Quantity" },
        { y: [85, 92], label: "Quality" },
        { y: [72, 78], label: "Delivery" }
        ]
        }]
        });
        chart.render();
        {{:"</scr" + "ipt>"}}
        <div id="chartContainerxx" height="100px" width="50px">

        </div>
        <div>
            <div style="text-align:right">
                <span><input type="text" style="text-align:center" size="20" /></span>
            </div>
        </div>
    </div>
</div>

谢谢！