Визуализированные данные в Canvas JS Chart - PullRequest
Новая
       6

Визуализированные данные в Canvas JS Chart

0 голосов
/ 01 июня 2018

Я использую CanvasJs для рендеринга графика, и сейчас он работает нормально.Хотя я не уверен, правильно ли он отображает данные на графике.Вот логика, которую я использую: 

var query = from c in GetProducts()
            group c by c.Type into g
            select new
            {
                Type = g.Key,
                Count = g.Count()
            };

double val = 0;
string valNo = "";

List<DataPoint> dataPoints = new List<DataPoint>();

foreach (var item in query)
{
   val = ((Convert.ToDouble(item.Count) / 30) * 100); //The logic - Tracks user login for 30 days. For the time being, days are fixed to 30 days
   valNo = val.ToString("#.##");

   DataPoint aDataPoint = new DataPoint();

   aDataPoint.y = valNo;
   aDataPoint.legendText = item.Type;
   aDataPoint.label = item.Type;

   dataPoints.Add(aDataPoint);

   ViewBag.DataPoints = JsonConvert.SerializeObject(dataPoints);
}

Контроллер и модель: 

public List<UserType> GetProducts()
{
   List<UserType> aLst = new List<UserType>()
   {
       new UserType() { UserId = 1001, Type = "Admin" },
       new UserType() { UserId = 1002, Type = "User" },
       new UserType() { UserId = 1003, Type = "Admin" },
       new UserType() { UserId = 1004, Type = "User" },
       new UserType() { UserId = 1005, Type = "Admin" },
       new UserType() { UserId = 1006, Type = "Operator" },
       new UserType() { UserId = 1007, Type = "Operator" },
       new UserType() { UserId = 1008, Type = "Admin" },
       new UserType() { UserId = 1009, Type = "Operator" },
       new UserType() { UserId = 1010, Type = "Admin" },
       new UserType() { UserId = 1011, Type = "Operator" },
       new UserType() { UserId = 1012, Type = "Vendor" },
       new UserType() { UserId = 1013, Type = "Vendor" },
       new UserType() { UserId = 1014, Type = "Admin" },
       new UserType() { UserId = 1015, Type = "Admin" },
       new UserType() { UserId = 1016, Type = "Admin" }
    };

    return aLst;
}

public class DataPoint
{
    public string y { get; set; }
    public string legendText { get; set; }
    public string label { get; set; }
}

Вид: 

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer"></div>

<script type="text/javascript">
                debugger;
                window.onload = function () {
                var chart = new CanvasJS.Chart("chartContainer", {
                        title: {
                            text: "Frequently Visited User Types (Sample)"
                        },
                        animationEnabled: true,
                        legend: {
                    verticalAlign: "center",
                            horizontalAlign: "left",
                            fontSize: 20,
                            fontFamily: "Helvetica"
                        },
                        theme: "theme2",
                                        data: [
                {
                    type: "pie",
                    indexLabelFontFamily: "Garamond",
                    indexLabelFontSize: 20,
                    indexLabel: "{label} {y}%",
                    startAngle: -20,
                    showInLegend: true,
                    toolTipContent: "{legendText} {y}%",
                    dataPoints: @Html.Raw(ViewBag.DataPoints),
                } ]
                    });
            chart.render();
        };
</script>

Теперь образец изображения, которое яЯ получаю:

Sample Chart

Я немного обеспокоен графиком, показанным выше, я имею в виду данные и расчеты.Хотя моя логика работает, но на графике администратор занимает 26,67% графика, и опять-таки кажется, что он занял 50%.Таким образом, отлично отображается данные на графике?Вот что меня смущает - Canvas JS Chart .Он рассчитывает все значения типа как 100% в конце и покрывает весь график.Так это зависит от номера типа или я что-то здесь упускаю?Любой совет или предложение было бы весьма заметно - спасибо.

1 Ответ

0 голосов
/ 02 июня 2018

Данные, которые вы имеете в точках данных: admin, 26.67;пользователь 6,67, оператор 13,33 и поставщик 6,67.Таким образом, admin% составляет 26,67 / 53,33 * 100 = 50%.Так что круговая диаграмма совершенно правильная.Это зависит от того, что вы хотите отобразить на графике.Админ появляется 8 раз за 16, он должен быть представлен с половиной пирога.Значения меток отличаются из-за вашего подсчета / 30 * 100.

...