Вопросы Теги

Наполнять график canvas c#

у меня есть проблема новичка, оказывается, что у меня есть график canvas (никогда не работы с графиками и js), оказывается, что у меня требует призывать данные к этому графику в особенности, так как у него есть пагинация, данные, которых я хочу разместить в графическом звуке класса:

   public JsonResult NuevoGrafico()
    {
        List<object> iDados = new List<object>();
        //Datatable 
        DataTable dt = new DataTable();
        dt.Columns.Add("Embosadora", System.Type.GetType("System.String"));
        dt.Columns.Add("Tarjetas emitidas", System.Type.GetType("System.Int32"));
        DataRow dr = dt.NewRow();
        dr["Embosadora"] = "DatacardSD260M1";
        dr["Tarjetas emitidas"] = 105;
        dt.Rows.Add(dr);

        Response.AddHeader("Refresh", "10");
        //coriendo y extrayendo cada datacolumn para el list<object>
        foreach (DataColumn dc in dt.Columns)
        {
            List<object> x = new List<object>();
            x = (from DataRow drr in dt.Rows select drr[dc.ColumnName]).ToList();
            iDados.Add(x);
        }
        //Datos retornados con JSON
        return Json(iDados, JsonRequestBehavior.AllowGet);
    }

Это мой вид:

@{
    ViewBag.Title = "charzzz";
}

<h2>charzzz</h2>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

<style type="text/css">

    .wrapper {
        width: 1000px;
        height: 500px;
        overflow-x: scroll;
    }

    .chartWrapper {
        width: 6000px;
    }
</style>


<div class="wrapper">
    <div class="chartWrapper">
        <canvas id="myChart" height="20"></canvas>
    </div>
</div>

<script>
    var lbl =[];
    var dt = [];
    for (var i = 1; i < 100; i++) {
        lbl.push("this_is_my_lable_name_" + i);
    }
    for (var i = 1; i < 100; i++) {
        dt.push(Math.floor((Math.random() * 100 + i)));
    }
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: lbl,
            datasets: [{
                label: 'Embozadoras',
                data: dt,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)',
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
</script>

Хоть бы кто-то ориентировал меня, привет

0
задан 19.03.2019, 22:34
1 ответ

ему удайтесь способствовать тому, чтобы мне показал список: 

<script>
$.ajax({
    type: "POST",
    url: "/Home/NuevoGrafico",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (mems) {
        var aData = mems;
        var aLabels = aData[0];
        var aDatasets1 = aData[1];
        var dataT = {
            labels: aLabels,
            datasets: [{
                label: "Tarjetas impresas",
                data: aDatasets1,
                backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
                borderWidth: 0,
            }]
        };
        var ctx = $("#mChart1").get(0).getContext("2d");
        var mChart1 = new Chart(ctx, {
            type: 'bar',
            data: dataT,
            options: {
                responsive: true,
                title: { display: true, text: 'Cantidad de Tarjetas emitidas' },
                legend: { position: 'bottom' },
                scales: {
                    xAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' } }],
                    yAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' }, ticks: { stepSize: 40, beginAtZero: true } }]
                },
            }
        });
    }
});

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

0
ответ дан 02.12.2019, 05:27

Теги

Похожие вопросы