ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / c3.js рисование двухмерных графиков
8 сообщений из 8, страница 1 из 1
c3.js рисование двухмерных графиков
    #39366097
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vadipok
Участник
Добрый день, коллеги!

Второй час мучаюсь, помогите плиз.
Есть пример здесь .

Код: html
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.
@{
    Layout = "~/Views/Shared/_LayoutWithSide.cshtml";
}

<head>
    <script type="text/javascript" src="@Url.Content("~/Scripts/c3.min.js")"></script>

    <script type="text/javascript" src="@Url.Content("~/Scripts/d3.min.js")"></script>

    <script language="JavaScript">
        var jsonData = [
            { name: 'www.site1.com', upload: 200 },
            { name: 'www.site2.com', upload: 100 },
            { name: 'www.site3.com', upload: 300 },
            { name: 'www.site4.com', upload: 400 }
        ]

        var data = {};
        var sites = [];
        jsonData.forEach(function (e) {
            sites.push(e.name);
            data[e.name] = e.upload;
        })

        chart = c3.generate({
            data: {
                json: [data],
                keys: {
                    value: sites,
                },
                type: 'pie'
            },
        });
    </script>
</head>

<body>
    <div id="chart"></div>
</body>



Вылетает ошибка, абсолютно не информативная. Как решить проблему проблему, помогите.
Официальный сайт
Пакет установил с помощью NuGet, так что ошибок тут не должно быть.
...
Рейтинг: 0 / 0
13.12.2016, 19:15
| Ответить | Цитировать | Написать  
c3.js рисование двухмерных графиков
    #39366399
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vadipok
Участник
Помощь еще требуется, удалил я прежний пример.

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

Код: html
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.
<head>
    <script type="text/javascript" src="@Url.Content("~/Scripts/Chart.jquery.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/Chart.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/Chart.index.js")"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h1>
                    My Charts
                </h1>
                <hr>
            </div>
            <div class="col-md-6">
                <h3>
                    Bar Chart
                </h3>
                <canvas id="myBarGraph"></canvas>
            </div>
            <div class="col-md-6">
                <h3>
                    Line Graph
                </h3>
                <canvas id="myGraph"></canvas>
            </div>
            <div class="col-md-6">
                <h3>
                    Radar Graph
                </h3>
                <canvas id="myRadarGraph"></canvas>
            </div>
            <div class="col-md-6">
                <h3>
                    Pie Chart
                </h3>
                <canvas id="myPieGraph"></canvas>
            </div>
            <div class="col-md-6">
                <h3>
                    Doughnut Chart
                </h3>
                <canvas id="myDoughnutGraph"></canvas>
            </div>
            <div class="col-md-6">
                <h3>
                    Polar Chart
                </h3>
                <canvas id="myPolarGraph"></canvas>
            </div>
        </div>
        <!-- end row -->
    </div>
    <!-- end container -->
</body>
...
Рейтинг: 0 / 0
14.12.2016, 09:30
| Ответить | Цитировать | Написать  
c3.js рисование двухмерных графиков
    #39366513
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vadipok
Участник
Может есть у кого пример?
Скиньте плиз.
Задача построить двухмерную диаграмму-линию.
...
Рейтинг: 0 / 0
14.12.2016, 11:23
| Ответить | Цитировать | Написать  
c3.js рисование двухмерных графиков
    #39366555
Фотография ЕвгенийВ
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ЕвгенийВ
Участник
vadipok,
F12 и смотри что за ошибки.
...
Рейтинг: 0 / 0
14.12.2016, 11:45
| Ответить | Цитировать | Написать  
c3.js рисование двухмерных графиков
    #39366688
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vadipok
Участник
ЕвгенийВvadipok,
F12 и смотри что за ошибки.

Спасибо за подсказку, нашел одну ошибку.

Необработанное исключение в строке 190, столбце 1 в http://localhost:51998/Scripts/Chart.index.js

0x800a138f - Ошибка выполнения JavaScript: Не удалось получить свойство "getContext" ссылки, значение которой не определено или является NULL


Код: html
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.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
Chart.defaults.global = {

	// Boolean - Whether to animate the chart
	animation: true,

	// Number - Number of animation steps
	animationSteps: 60,

	// String - Animation easing effect
	// Possible effects are:
	// [easeInOutQuart, linear, easeOutBounce, easeInBack, easeInOutQuad,
	//  easeOutQuart, easeOutQuad, easeInOutBounce, easeOutSine, easeInOutCubic,
	//  easeInExpo, easeInOutBack, easeInCirc, easeInOutElastic, easeOutBack,
	//  easeInQuad, easeInOutExpo, easeInQuart, easeOutQuint, easeInOutCirc,
	//  easeInSine, easeOutExpo, easeOutCirc, easeOutCubic, easeInQuint,
	//  easeInElastic, easeInOutSine, easeInOutQuint, easeInBounce,
	//  easeOutElastic, easeInCubic]
	animationEasing: "easeOutBack",

	// Boolean - If we should show the scale at all
	showScale: true,

	// Boolean - If we want to override with a hard coded scale
	scaleOverride: false,

	// ** Required if scaleOverride is true **
	// Number - The number of steps in a hard coded scale
	scaleSteps: null,
	// Number - The value jump in the hard coded scale
	scaleStepWidth: null,
	// Number - The scale starting value
	scaleStartValue: null,

	// String - Colour of the scale line
	scaleLineColor: "rgba(0,0,0,.1)",

	// Number - Pixel width of the scale line
	scaleLineWidth: 1,

	// Boolean - Whether to show labels on the scale
	scaleShowLabels: true,

	// Interpolated JS string - can access value
	scaleLabel: "<%=value%>",

	// Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
	scaleIntegersOnly: true,

	// Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
	scaleBeginAtZero: false,

	// String - Scale label font declaration for the scale label
	scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

	// Number - Scale label font size in pixels
	scaleFontSize: 12,

	// String - Scale label font weight style
	scaleFontStyle: "normal",

	// String - Scale label font colour
	scaleFontColor: "#666",

	// Boolean - whether or not the chart should be responsive and resize when the browser does.
	responsive: true,

	// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
	maintainAspectRatio: true,

	// Boolean - Determines whether to draw tooltips on the canvas or not
	showTooltips: true,

	// Function - Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips))
	customTooltips: false,

	// Array - Array of string names to attach tooltip events
	tooltipEvents: ["mousemove", "touchstart", "touchmove"],

	// String - Tooltip background colour
	tooltipFillColor: "rgba(0,0,0,0.8)",

	// String - Tooltip label font declaration for the scale label
	tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

	// Number - Tooltip label font size in pixels
	tooltipFontSize: 14,

	// String - Tooltip font weight style
	tooltipFontStyle: "normal",

	// String - Tooltip label font colour
	tooltipFontColor: "#fff",

	// String - Tooltip title font declaration for the scale label
	tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

	// Number - Tooltip title font size in pixels
	tooltipTitleFontSize: 14,

	// String - Tooltip title font weight style
	tooltipTitleFontStyle: "bold",

	// String - Tooltip title font colour
	tooltipTitleFontColor: "#fff",

	// Number - pixel width of padding around tooltip text
	tooltipYPadding: 6,

	// Number - pixel width of padding around tooltip text
	tooltipXPadding: 6,

	// Number - Size of the caret on the tooltip
	tooltipCaretSize: 8,

	// Number - Pixel radius of the tooltip border
	tooltipCornerRadius: 6,

	// Number - Pixel offset from point x to tooltip edge
	tooltipXOffset: 10,

	// String - Template string for single tooltips
	tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",

	// String - Template string for multiple tooltips
	multiTooltipTemplate: "<%= value %>",

	// Function - Will fire on animation progression.
	onAnimationProgress: function () { },

	// Function - Will fire on animation completion.
	onAnimationComplete: function () { }
};

// BEGIN POLAR DATA ============================================

var barData = {
	labels: ["January", "February", "March", "April", "May", "June", "July"],
	datasets: [{
		label: "My First dataset",
		fillColor: "rgba(220,220,220,0.5)",
		strokeColor: "rgba(220,220,220,0.8)",
		highlightFill: "rgba(220,220,220,0.75)",
		highlightStroke: "rgba(220,220,220,1)",
		data: [35, 59, 80, 81, 56, 55, 40]
	}, {
		label: "My Second dataset",
		fillColor: "rgba(151,187,205,0.5)",
		strokeColor: "rgba(151,187,205,0.8)",
		highlightFill: "rgba(151,187,205,0.75)",
		highlightStroke: "rgba(151,187,205,1)",
		data: [28, 48, 40, 19, 86, 27, 90]
	}]
};
var barOptions = {
	//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
	scaleBeginAtZero: true,

	//Boolean - Whether grid lines are shown across the chart
	scaleShowGridLines: true,

	//String - Colour of the grid lines
	scaleGridLineColor: "rgba(0,0,0,.05)",

	//Number - Width of the grid lines
	scaleGridLineWidth: 1,

	//Boolean - Whether to show horizontal lines (except X axis)
	scaleShowHorizontalLines: true,

	//Boolean - Whether to show vertical lines (except Y axis)
	scaleShowVerticalLines: true,

	//Boolean - If there is a stroke on each bar
	barShowStroke: true,

	//Number - Pixel width of the bar stroke
	barStrokeWidth: 2,

	//Number - Spacing between each of the X value sets
	barValueSpacing: 5,

	//Number - Spacing between data sets within X values
	barDatasetSpacing: 1,

	//String - A legend template
	legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

};

var barCtx = document.getElementById("myBarGraph").getContext("2d");
var myBarChart = new Chart(barCtx).Bar(barData, barOptions);



Ругается на предпоследнею строку.

Не понимаю, почему такая ошибка, я скачал их разработку.
Все оттуда вытащи практически без изменений, кроме названия и путей расположения и вылетает ошибка.
...
Рейтинг: 0 / 0
14.12.2016, 13:21
| Ответить | Цитировать | Написать  
c3.js рисование двухмерных графиков
    #39366691
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vadipok
Участник
Разобрался, всем спасибо!
...
Рейтинг: 0 / 0
14.12.2016, 13:24
| Ответить | Цитировать | Написать  
c3.js рисование двухмерных графиков
    #39435705
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vadipok
Участник
Доброе утро!

Коллеги стыдно просить, но похоже я один не справлюсь.
Прошу прощения, что вопрос не по тематике форума, с английским туго так что лучше здесь спросить.
Использую chart.js для рисования графиков.
Мне надо в графике в осях координат сделать лайблы, типа по оси Х месяц, по оси У объем продаж.
Вот здесь есть пример ТЫНЦ .
Я использую Line Graph , можно прямо там показать.

У меня получается пометить либо ось Х либо ось У, оба почему то не получается.
 

Y:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
    var ctx = document.getElementById(idGraph).getContext("2d");
    var myLineChart = new Chart(ctx).LineAlt(lineGraphData, {
        // make enough space on the right side of the graph
        scaleLabel: "          <%=value%>"
    });

            draw: function () {
            Chart.types.Line.prototype.draw.apply(this, arguments);

            var ctx = this.chart.ctx;
            ctx.save();
            // text alignment and color
            ctx.textAlign = "center";
            ctx.textBaseline = "bottom";
            ctx.fillStyle = this.options.scaleFontColor;
            // position
            var x = this.scale.xScalePaddingLeft * 0.4;
            var y = this.chart.height / 2;
            // change origin
            ctx.translate(x, y);
            // rotate text
            ctx.rotate(-90 * Math.PI / 180);
            ctx.fillText("Бабак", 0, 0);
        },



X: (Y не отображается на экране)
Код: javascript
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.
 Chart.types.Line.extend({
        name: "LineAlt",
        initialize: function (data) {
            this.chart.height -= 30;

            Chart.types.Line.prototype.initialize.apply(this, arguments);

            var ctx = this.chart.ctx;
            ctx.save();
            // text alignment and color
            ctx.textAlign = "center";
            ctx.textBaseline = "bottom";
            ctx.fillStyle = this.options.scaleFontColor;

            // Даем название оси X
            // position
            var x = this.chart.width / 2;
            var y = this.chart.height + 15 + 5;
            // change origin
            ctx.translate(x, y)
            ctx.fillText("Барбамбия", 0, 0);

            // ctx.restore();

            
            // Даем название оси Y
            var x1 = 10 - this.chart.width / 2;
            var y1 = -10;
            // change origin
            ctx.translate(x1, y1);
            // rotate text
            ctx.rotate(-90 * Math.PI / 180);
            ctx.fillText("Кергуду", 0, 0);
            
            ctx.restore();
        }
    });



...
Рейтинг: 0 / 0
10.04.2017, 11:10
| Ответить | Цитировать | Написать  
c3.js рисование двухмерных графиков
    #39436666
vadipok
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vadipok
Участник
Вот тут получилось все сделать ТЫНЦ .
Поменяв код вот так:
Код: javascript
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.
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
    label: 'Dataset 1',
    backgroundColor: "rgba(220,220,220,0.5)",
    data: [6, 6, 6, 8, 6, 9, 8]
}]
}

  var context = document.getElementById('stacked').getContext('2d');
  var myBar = new Chart(context, {
      type: 'bar',

      data: barChartData,
      options: {

          title:{
              display:true,
              text:"Chart.js Bar Chart - Stacked"
          },
          tooltips: {
              mode: 'label'
          },
          responsive: true,
                      scales: {

                xAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'БАРБАМБИЯ'
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'КЕРГУДУ'
                    }
                }]
            },
      }
  });




У меня в проекте подозреваю, что сделано динамически, и соответственно не получается.
Я даже найти не могу как соответствуют друг другу динамические параметры и те которые указаны тут.

Все еще нужна помощь!
Спасибо!
...
Рейтинг: 0 / 0
11.04.2017, 17:09
| Ответить | Цитировать | Написать  
8 сообщений из 8, страница 1 из 1
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / c3.js рисование двухмерных графиков
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]