Точки данных не отображаются при построении диаграммы Bubble динамического графика с использованием MVC - PullRequest
0 голосов
/ 07 сентября 2018

Я пытаюсь извлечь данные из контроллера для динамического рендеринга пузыря диаграммы в 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 аргумента Итак, как я могу включить значение радиуса, а также данные для построения диаграммы пузыря

Итак, как я могу построить пузырьковую диаграмму для динамического извлечения данных из контроллера

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...