Question

我正在尝试从控制器中检索数据，以使用Visual Studio在MVC中动态呈现气泡图表使用

时

这是图表控制器

public ActionResult Index()
    {
        GraphData dataPoints = new GraphData();
        GraphModels dataList = new GraphModels();
        dataList.bubble = dataPoints.GetBubbleData();
        return View(dataList);
    }

这是气泡ViewModel

namespace WebApplication1.ChartViewModel
{
[DataContract]
public class DatapointBubbleViewModel
 {
     public Nullable<double> Y { get; set; }//value for plotting data
     public Nullable<double> X { get; set; }
     public Nullable<double> r { get; set; }//radius value
 }
}

这是气泡GraphData

 public List<DatapointBubbleViewModel> GetBubbleData()
    {
        return new List<DatapointBubbleViewModel>{
            new  DatapointBubbleViewModel{X=10,Y=50,r=10}
            //new  DatapointBubbleViewModel{X=20,Y=23,r=10},
            //new  DatapointBubbleViewModel{X=30,Y=33,r=10},
            //new  DatapointBubbleViewModel{X=40,Y=15,r=10},
            //new  DatapointBubbleViewModel{X=40,Y=70,r=10},
            //new  DatapointBubbleViewModel{X=50,Y=21,r=10},
            //new  DatapointBubbleViewModel{X=60,Y=60,r=10}
        };
    }

这是气泡的局部视图

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div class="white-box">
    <h3 class="box-title">Bubble Chart</h3>
    <div>
        <canvas id="mychart7" height="150"></canvas>
    </div>
</div>
<script>
    var ctx = document.getElementById("mychart7").getContext('2d');
    var config = {
        type: 'bubble',
        data: {
            labels: @Html.Raw(Json.Encode(Model.bubble.Select(x => x.X))),
            datasets: [
                {
                    label: 'My First dataset',
                    data:   @Html.Raw(Json.Encode(Model.bubble.Select(x => x.Y))),// Here i need to include Radius value for bubble chart
                        backgroundColor: [
                        'rgba(252,201,186,0.8)'
                        ],
                }
            ],
        }
    };
    var chart1 = new Chart(ctx, config);
</script>

这是索引页面中包含的部分视图

 <div class="row">
                <div class="col-lg-6 col-sm-12 col-md-12 col-xs-12">
                    @{
                        Html.RenderPartial("_report_bubble", Model);
                    }
                </div>
                <div class="col-lg-6 col-sm-12 col-md-12 col-xs-12">

                    @{
                        Html.RenderPartial("_report_horizontal", Model);
                    }
                </div>
            </div>

要填充气泡图的数据，我们需要3个参数（X，Y，r），但是由于我使用@ Html.Raw（Json.Encode（Model.bubble.Select（x => xY）））选项有绘制的图，但未呈现数据。 Bubble chart without data 当我尝试在选择语句中包含半径值（第二个参数）时，我得到

方法'Select'的重载不包含2个参数那么如何包含半径值以及绘制气泡图的数据

所以我应该如何绘制气泡图来动态地从控制器中检索数据

使用MVC绘制动态Bubble chart.js时未呈现数据点

0 个答案: