Я пытаюсь извлечь данные из контроллера для динамического рендеринга пузыря диаграммы в MVC с использованием Visual Studio.
При использовании
Это контроллер диаграммы
public ActionResult Index()
{
GraphData dataPoints = new GraphData();
GraphModels dataList = new GraphModels();
dataList.bubble = dataPoints.GetBubbleData();
return View(dataList);
}
Это пузырьковая модель представления
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))) для данных вариант
есть график, но данные не отображаются.
Пузырьковая диаграмма без данных
Когда я пытаюсь включить значение радиуса (второй параметр) в оператор выбора, я получаю
Без перегрузки для метода 'Select' принимает 2 аргумента
Итак, как я могу включить значение радиуса, а также данные для построения диаграммы пузыря
Итак, как я могу построить пузырьковую диаграмму для динамического извлечения данных из контроллера