Форум программистов, компьютерный форум, киберфорум
C#: Web, ASP.NET
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.86/7: Рейтинг темы: голосов - 7, средняя оценка - 4.86
0 / 0 / 1
Регистрация: 27.12.2012
Сообщений: 25
1
.NET 4.x

Canvasjs Chart generator from model

01.05.2019, 18:54. Показов 1368. Ответов 7

Хочу научиться генерировать графики динамические ( на с# asp net mvc c использованием Razor).

Задача: в сущности view нужно отобразить графики через готовую библиотеку canvasjs и готовую для этого модель в контролере передать в виде графиков:

Модель
C#
1
2
3
4
5
6
7
8
9
10
11
public class Lines
 
    {
 
        public List<string> Line { get; set; }
 
        public List<string> Color { get; set; }
 
        public string Name { get; set; }
 
    }

решение: https://pastebin.com/Rpr7V8ce ссылка на мой код который генерит множество графиков но статические 3 линии.

Проблема:
Как можно изобразить график с динамическим количеством линий? ( при передаче объекта List<Lines>) сгенерировать из него то количество графиков которое нужно с тем количеством линий которое нужно и нужных цветов.

Пример: https://jsfiddle.net/zvc86pjh/3/
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
01.05.2019, 18:54
Ответы с готовыми решениями:

Убрать спецсимволы при выводе Html.DisplayNameFor(model => model.Text)
У меня есть текстовый редактор, который в БД сохраняет текст в БД. На другой странице я хочу этот...

NVIDIA RIVA TNT2 Model 64/Model 64 Pro (Microsoft Corporation)
Нашел несколько вот таких древностей NVIDIA RIVA TNT2 Model 64/Model 64 Pro (Microsoft...

Из model small в model tiny
Доброго времени суток . Помогите переделать программу из model small в tiny при помощи функций 3Fh...

JSON object-generator
Ребят, проблема такого характера. Я отправляю get запросы на сервер, получаю респонс json-файлы....

7
2400 / 1830 / 542
Регистрация: 02.08.2011
Сообщений: 5,149
01.05.2019, 19:34 2
CanvasJs принимает объект-конфигурацию/опцию, у которого есть свойство data:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
                data: 
[
               {
                type:"line",
        axisYType: "secondary",
        name: "San Fransisco",
        showInLegend: true,
        markerSize: 0,
        yValueFormatString: "$#,###k",
        dataPoints: [{x: null, y: null}]
                }
]
Может вам сделать нормальную модель-дубликат этого объекта и передавать List<> уже этих объектов?, а то что сверху у вас - смахивает на какую-то порнографию.

Далее просто в JS-е можно брать примерно так:
Javascript
1
2
3
4
5
6
7
8
var chart = new CanvasJS.Chart("chartContainer", { ... });
chart.render();
 
// при нажатии на кнопку 
var newData = getFromSomewhere();
chart.data.push(newData); 
// повторно рендерим
chart.render();
Добавлено через 3 минуты
Возможно у CanvasJS есть более правильное API для перерисовки/добавления линий на чарт.
0
0 / 0 / 1
Регистрация: 27.12.2012
Сообщений: 25
01.05.2019, 19:39  [ТС] 3
https://canvasjs.com/asp-net-m... -database/ у них в примере так как я сделал, точно так же криво)
0
2400 / 1830 / 542
Регистрация: 02.08.2011
Сообщений: 5,149
01.05.2019, 20:35 4
Так, немного неверно, согласно reference нужно использовать options, что логично:
Javascript
1
2
// добавить новую линию (указав это в свойствах добавляемого объекта)
chart.options.data.push({object}); // add new series
Добавлено через 54 минуты
C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public class SeriesModel
    {
        public string Type { get; set; }
        public string AxisYType { get; set; }
 
        public string Name { get; set; }
 
        public bool ShowInLegend { get; set; }
 
        public int MarkerSize { get; set; }
 
        public string YValueFormatString { get; set; } = "$#,###k";
 
        public List<Point> Points { get; } = new List<Point>();
    }
Контроллер:
C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
public class HomeController : Controller
    {
        private static Random _random = new Random();
 
        public IActionResult Index()
        {
 
            var models = new List<SeriesModel>(    
            new[] {
            new SeriesModel()
            {
                Type = "line",
                AxisYType = "secondary",
                Name = "Second Line",
                ShowInLegend = true,
                MarkerSize = 0,
            },
            new SeriesModel()
            {
                Type = "line",
                AxisYType = "secondary",
                Name = "Second line",
                ShowInLegend = true,
                MarkerSize = 0,
            },
            new SeriesModel()
            {
                Type = "line",
                AxisYType = "secondary",
                Name = "Third Line",
                ShowInLegend = true,
                MarkerSize = 0,
            },
            new SeriesModel()
            {
                Type = "line",
                AxisYType = "secondary",
                Name = "4th Line",
                ShowInLegend = true,
                MarkerSize = 0,
            },
            new SeriesModel()
            {
                Type = "line",
                AxisYType = "secondary",
                Name = "5th Line",
                ShowInLegend = true,
                MarkerSize = 0,
            }}
            );
 
            foreach(var model in models)
            {
                model.Points.AddRange(Enumerable.Range(1, 10).Select(x => new Point { X = _random.Next(0, 10), Y = _random.Next(0, 10) }));
            }
 
            ViewBag.Models = JsonConvert.SerializeObject(models);
            return View();
}

Razor-page:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
@{
    ViewData["Title"] = "Home Page";
}
 
    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
        <div id="chartContainer" style="height: 370px; width: 100%;"></div>
        <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
        <script type="text/javascript">
            var chart = new CanvasJS.Chart("chartContainer", {
                                animationEnabled: true,
                                title: {
                                    text: "Product Trends By Month"
                                },
                                axisY: {
                                    includeZero: false
                                },
                                toolTip: {
                                    shared: true
                                },
                data: []
            });
 
 
            var data = JSON.parse('@Html.Raw(ViewBag.Models)');
 
            data.forEach(function (series) {
                chart.options.data.push(Object.assign({}, {
                    type: series.Type,
                    name: series.Name,
                    showInLegend: series.ShowInLegend,
                    dataPoints: series.Points.map(p => Object.assign({}, {x: p.X, y: p.Y}))
                }));
            })
            
            chart.render();
 
        </script>
    </div>
0
2400 / 1830 / 542
Регистрация: 02.08.2011
Сообщений: 5,149
01.05.2019, 20:38 5
Смысла в рандомных данных конечно нету, но по крайней мере работает.
Миниатюры
Canvasjs Chart generator from model  
0
2400 / 1830 / 542
Регистрация: 02.08.2011
Сообщений: 5,149
01.05.2019, 20:48 6
Лучший ответ Сообщение было отмечено sarmkadan как решение

Решение

К слову, во Vue.js свойства всех передаваемыех данных с сервера автоматом приводятся к нижнему регистру (по правилам js-а).
И вместо этой портянки:
Javascript
1
2
3
4
5
6
7
8
data.forEach(function (series) {
                chart.options.data.push(Object.assign({}, {
                    type: series.Type,
                    name: series.Name,
                    showInLegend: series.ShowInLegend,
                    dataPoints: series.Points.map(p => Object.assign({}, {x: p.X, y: p.Y}))
                }));
            })
Можно просто писать data.forEach(series => chart.options.data.push(series));.
1
0 / 0 / 1
Регистрация: 27.12.2012
Сообщений: 25
01.05.2019, 20:51  [ТС] 7
Спасибо большое Буду разбираться, можно ли как-то отблагодарить?)
0
2400 / 1830 / 542
Регистрация: 02.08.2011
Сообщений: 5,149
01.05.2019, 20:52 8
Вы уже это сделали. Печеньки к репутации - это всегда хорошо.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
01.05.2019, 20:52

MAC Address Generator
Подскажите как можно генерировать мак адрес ?

Python list generator
ребят, подскажите пожалуйста, можно ли заменить в кодe двf цикла на генераторы списка? Код...

Relay and PWM Generator
Здравствуйте, подскажите пожалуйста. Нужно сравнить позиционное регулирование и регулирование с...

Выбор Function Generator
Хочу купить себе Arbitrary Waveform / Function Kimerator Так,.. для лаборатории с заделом на...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru