Question

我在ASP.NET中工作，并且有一个foreach循环。我想在循环的每次迭代中添加一个新的高图。我没有得到任何错误，但只有第一张图表绘制，它只是没有显示任何东西。

这就是我所拥有的：

@foreach (Review r in @Model.Reviews)
{

    <div style="margin-bottom: 10px; width: 70%;">
        @Html.ActionLink(@r.Business.Name, "BusinessDetail", new { id = @r.Business.ID }, new { @class = "business-link" })
    </div>


    <div style="width: 70%;" id="review-container">
        <p>@r.Text</p>
        <center style="margin-bottom: 25px;">

            <div id='container1' style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto">
                <script type="text/javascript">
                    $(function () {
                        $('#container1').highcharts({
                            chart: {
                                backgroundColor: 'rgba(255, 255, 255, 0.01)',
                                plotBorderWidth: 0,
                                plotShadow: false
                            },
                            title: {
                                text: 'Browser<br>shares',
                                align: 'center',
                                verticalAlign: 'middle',
                                y: 50
                            },
                            tooltip: {
                                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                            },
                            plotOptions: {
                                pie: {
                                    dataLabels: {
                                        enabled: true,
                                        distance: -50,
                                        style: {
                                            fontWeight: 'bold',
                                            color: 'white',
                                            textShadow: '0px 1px 2px black'
                                        }
                                    },
                                    startAngle: -90,
                                    endAngle: 90,
                                    center: ['50%', '75%']
                                }
                            },
                            series: [{
                                type: 'pie',
                                name: 'Vote Count',
                                data: [
                                    ['Useful', @r.UsefulVoteCount],
                                    ['Cool', @r.CoolVoteCount],
                                    ['Funny', @r.FunnyVoteCount],

                                ]
                            }]
                        });
                    });

                </script>
            </div>
        </center>
    </div>
</center>

}

Answer 1

您的代码循环遍历r，但您只能在$('#container1').highcharts(...)中创建图表。您需要创建一个新容器并调用新的highcharts来生成图表。有很多方法可以做到这一点。

highcharts包含foreach中的多个图表

1 个答案: