ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [JS] Chart
22 сообщений из 22, страница 1 из 1
[JS] Chart
    #39010006
Фотография _Vasilisk_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Vasilisk_
Участник
А посоветуйте быструю библиотечку для рисования графиков в JavaScript. Требование - отрисовка 2000 точек на линейной кривой два раза в секунду.

Дополнительными бонусами будут поддержка масштабирования

Или забить на задачу и сразу смотреть в сторону Java аплетов?


С уважением, Vasilisk
...
Рейтинг: 0 / 0
17.07.2015, 15:24
| Ответить | Цитировать | Написать  
[JS] Chart
    #39010053
Фотография _Vasilisk_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Vasilisk_
Участник
Посмотрел чарт от гугла. Значительно веселее ChartJS, но 2000 точек для него предел. А 10000 убивает в дребезги. Попробую еще фильтрацию сделать
...
Рейтинг: 0 / 0
17.07.2015, 16:10
| Ответить | Цитировать | Написать  
[JS] Chart
    #39010055
Фотография _Vasilisk_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Vasilisk_
Участник
_Vasilisk_Значительно веселее чем ChartJS
...
Рейтинг: 0 / 0
17.07.2015, 16:11
| Ответить | Цитировать | Написать  
[JS] Chart
    #39010110
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Лично я, попробовав несколько вариантов, остановился на http://www.highcharts.com/
Но ничего не могу сказать насчет удовлетворения требованиям 2000 точек в пол-секунды.
...
Рейтинг: 0 / 0
17.07.2015, 17:00
| Ответить | Цитировать | Написать  
[JS] Chart
    #39010139
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
_Vasilisk_,

 
а графики сильно сложные? Может такой вариант пойдет?
Код: 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.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="windows-1251">
    <title>Построение графиков функций</title>
    <script type="text/javascript" src="chart.js"></script>
    <script type="text/javascript">
      colors = ['maroon','green','olive','navy','purple','teal'];

      // Инициализация параметров
      function chartInit() {
        var func   = document.getElementsByName('func')[0];
        var color  = document.getElementsByName('color')[0];
        var canvas = document.getElementById('chart');
        func.value = '';
        func.focus();
        color.value = colors[0];
        color.style.color = colors[0];
        Chart.drawAxis(canvas);
        funcCount = 0;
      }

      // Отображение графика
      function draw(form) {
        var func  = form.func.value;
        var color = form.color.value;
        if ( func != '' ) {
          var context = Chart.context;
          context.font = 'normal 10pt Courier';
          context.strokeStyle = color;
          funcCount++;
          context.strokeText(funcCount + '. f(x)=' + func, 0, funcCount * 12);
          Chart.drawChart(func, color);
          form.color.value = colors[funcCount % colors.length];
          form.color.style.color = colors[funcCount % colors.length];
        } else alert('Не введена функция');
        form.func.value = '';
        form.func.focus();
        return false;
      }
    </script>
  </head>
  <body onload="chartInit()">
    <form onsubmit="return draw(this)">
      f(x) = <input type="text" name="func" size="24">
      <select name="color" style="font-weight: bold" onchange="this.style.color = this.value">
        <option value="maroon" style="color: maroon">Красный</option>
        <option value="green" style="color: green">Зеленый</option>
        <option value="olive" style="color: olive">Желтый</option>
        <option value="navy" style="color: navy">Синий</option>
        <option value="purple" style="color: purple">Фиолетовый</option>
        <option value="teal" style="color: teal">Голубой</option>
      </select>
      <input type="submit" value="Построить">
      <input type="button" value="Очистить" onclick="if ( confirm('Очистить?') ) chartInit()">
    </form>
    <br>
    <canvas id="chart" width="800" height="520">HTML5 не поддерживается</canvas>

<script>
//Взято с http://programmersforum.ru/showthread.php?t=245008
var Chart = {
  // Параметры:
  axisColor: 'black', // цвет осей
  axisBackColor: 'white', // цвет фона
  axisXScale: 40, // масштаб по X
  axisYScale: 40, // масштаб по Y

}

// Отображение осей координат:
Chart.drawAxis = function(canvas) {
  this.canvas = canvas;
  if ( ! canvas.getContext ) return false;
  var context = canvas.getContext('2d');
  this.context = context;

  context.save();
  context.fillStyle = this.axisBackColor;
  context.fillRect(0, 0, canvas.width, canvas.height);
  context.lineWidth = 1;
  context.strokeStyle = this.axisColor;

  this.ox = Math.floor(canvas.width / 2) + 0.5;
  this.oy = Math.floor(canvas.height / 2) + 0.5;

  // ось OX
  context.save();
  context.translate(0, this.oy);
  context.beginPath();
  context.moveTo(0, 0);
  context.lineTo(canvas.width - 2, 0);
  context.lineTo(canvas.width - 7, 5);
  context.moveTo(canvas.width - 2, 0);
  context.lineTo(canvas.width - 7, -5);
  context.stroke();
  context.restore();

  // ось OY
  context.save();
  context.translate(this.ox, 0)
  context.beginPath();
  context.moveTo(0,  canvas.height);
  context.lineTo(0,  2);
  context.lineTo(5,  7);
  context.moveTo(0,  2);
  context.lineTo(-5, 7);
  context.stroke();
  context.restore();

  // подписи к осям
  context.save();
  context.font = 'normal 6pt Courier';
  context.translate(this.ox, this.oy);

  // подписи OX
  context.textAlign = 'center';
  var maxX = Math.floor(this.ox / this.axisXScale);
  if ( maxX * this.axisXScale > this.ox - 12 ) maxX--;
  for ( var i = 1; i <= maxX; i++ ) {
    var x = i;
    for ( var j = 0; j < 2; j++ ) {
      var xPos = x * this.axisXScale;
      context.beginPath();
      context.moveTo(xPos, -3);
      context.lineTo(xPos, 3);
      context.stroke();
      context.strokeText(x, xPos, 12);
      x = -x;
    }
  }

  // подписи OY
  context.textAlign = 'right';
  context.textBaseline = 'middle';
  var maxY = Math.floor(this.oy / this.axisYScale);
  if ( maxY * this.axisYScale > this.oy - 12 ) maxY--;
  for ( var i = 1; i <= maxY; i++ ) {
    var y = i;
    for ( var j = 0; j < 2; j++ ) {
      var yPos = -y * this.axisYScale;
      context.beginPath();
      context.moveTo(-3, yPos);
      context.lineTo(3,  yPos);
      context.stroke();
      context.strokeText(y, -6, yPos);
      y = -y;
    }
  }

  context.font = 'normal 10pt Courier';
  context.strokeText('x', this.ox - 6, 12);
  context.strokeText('y', -12, 6 - this.oy);
  context.restore();

  context.restore();
  return true;
}

// Построить график
Chart.drawChart = function(func, color) {

  // добавляем "Math." перед функциями
  func = func.replace(/([a-z]{2,}).*?/gi, 'Math.$1');

  // параметры рисования
  var context = this.context;
  context.save();
  context.lineJoin = 'round';
  context.lineWidth = 2;
  context.strokeStyle = color;
  context.translate(this.ox, this.oy);

  // отображение графика
  context.beginPath();
  var moveToFlag = true;
  var x, y, ok;
  for ( var xPos = -this.ox; xPos <= this.ox; xPos++ ) {
    x = xPos / this.axisXScale;
    ok = true;
    try {
      eval('y = ' + func);
    } catch(e) {
      moveToFlag = true;
      ok = false;
    }
    if ( ok ) {
      yPos = -y * this.axisYScale;
      if ( moveToFlag ) {
        context.moveTo(xPos, yPos);
        moveToFlag = false;
      } else context.lineTo(xPos, yPos);
      if ( yPos < -this.oy * 2 || yPos > this.oy * 2 ) moveToFlag = true;
    };
  }
  context.stroke();

  context.restore();
}
</script>
</body>
</html>

...
Рейтинг: 0 / 0
17.07.2015, 17:30
| Ответить | Цитировать | Написать  
[JS] Chart
    #39010143
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
user89,

З.Ы. в начале есть строчка
Код: javascript
1.
<script type="text/javascript" src="chart.js"></script>

Она лишняя.
...
Рейтинг: 0 / 0
17.07.2015, 17:33
| Ответить | Цитировать | Написать  
[JS] Chart
    #39010189
yelena
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
yelena
Гость
http://canvasjs.com/docs/charts/intro/high-performance-javascript-charts/
...
Рейтинг: 0 / 0
17.07.2015, 18:14
| Ответить | Цитировать | Написать  
[JS] Chart
    #39010244
Фотография _Vasilisk_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Vasilisk_
Участник
Antonariyостановился на http://www.highcharts.com/ Посмотрел. Прикольная штука. Но не успевает. Понравилось, что у него нет очереди отрисовки. Т.е. если приходит новый пакет, а старый еще не закончил рисоваться, то начинается отрисовка нового пакета
user89Может такой вариант пойдет?Не хочется велосипедов. Конкретно сейчас задача - скорость отрисовки, но аппетит приходит во время еды. А поддерживать весь функционал чарта, включая масштабирование, нет желания
...
Рейтинг: 0 / 0
17.07.2015, 19:20
| Ответить | Цитировать | Написать  
[JS] Chart
    #39010246
Фотография _Vasilisk_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Vasilisk_
Участник
yelena http://canvasjs.com/docs/charts/intro/high-performance-javascript-charts/ Одним глазом глянул. Впечатлило. Будем пробовать
...
Рейтинг: 0 / 0
17.07.2015, 19:22
| Ответить | Цитировать | Написать  
[JS] Chart
    #39010252
Фотография _Vasilisk_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Vasilisk_
Участник
yelena http://canvasjs.com/docs/charts/intro/high-performance-javascript-charts/ Посмотрел двумя глазами Оно. Спасибо.
...
Рейтинг: 0 / 0
17.07.2015, 19:46
| Ответить | Цитировать | Написать  
[JS] Chart
    #39013556
Фотография _Vasilisk_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Vasilisk_
Участник
Из печального. Эта библиотека приводит к диким утечкам в IE10
...
Рейтинг: 0 / 0
22.07.2015, 16:07
| Ответить | Цитировать | Написать  
[JS] Chart
    #39013585
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
_Vasilisk_Из печального. Эта библиотека приводит к диким утечкам в IE10не поддерживай его, делов-то.
...
Рейтинг: 0 / 0
22.07.2015, 16:23
| Ответить | Цитировать | Написать  
[JS] Chart
    #39013596
Фотография _Vasilisk_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Vasilisk_
Участник
Antonariyне поддерживай его, делов-то.В 43 Хроме аналогично
...
Рейтинг: 0 / 0
22.07.2015, 16:25
| Ответить | Цитировать | Написать  
[JS] Chart
    #39013618
Фотография _Vasilisk_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Vasilisk_
Участник
В 44 Хроме скорость поглощения памяти выросла в 4 раза, по сравнению с 43
...
Рейтинг: 0 / 0
22.07.2015, 16:36
| Ответить | Цитировать | Написать  
[JS] Chart
    #39013727
Фотография _Vasilisk_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Vasilisk_
Участник
Заменил функцию рендеринга. Вместо
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
function render(AData) {
    var chart = new CanvasJS.Chart('chart', {
      data: [{
        type: 'line',
        dataPoints: AData
      }]
    });
    chart.render();
}

сделал
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
var chart = new CanvasJS.Chart('chart', {
  data: [{
    type: 'line',
    dataPoints: []
  }]
});
function render(AData) {
    chart.options.data[0].dataPoints = AData;
    chart.render();
}

утечки ушли. И в хроме и в ИЕ
...
Рейтинг: 0 / 0
22.07.2015, 17:23
| Ответить | Цитировать | Написать  
[JS] Chart
    #39013860
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
магия!

а такой вариант течет?

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
function render(AData) {
    var chart = new CanvasJS.Chart('chart', {
      data: [{
        type: 'line',
        dataPoints: []
      }]
    });
    chart.options.data[0].dataPoints = AData;
    chart.render();
}
...
Рейтинг: 0 / 0
22.07.2015, 18:35
| Ответить | Цитировать | Написать  
[JS] Chart
    #39014008
Фотография _Vasilisk_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Vasilisk_
Участник
Antonariyмагия!Я думаю, что где-то внутри держится список чартов, отсюда и утечки. А так я чарт создаю только однажды
Antonariyа такой вариант течет?Завтра проверю. Думаю, да
...
Рейтинг: 0 / 0
22.07.2015, 22:44
| Ответить | Цитировать | Написать  
[JS] Chart
    #39014029
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
тогда заодно и такой

Код: javascript
1.
2.
3.
4.
5.
6.
7.
var chart = new CanvasJS.Chart('chart', {
  data: [{
    type: 'line',
    dataPoints: AData
  }]
});
chart.render();


заинтриговал прям.
...
Рейтинг: 0 / 0
22.07.2015, 23:12
| Ответить | Цитировать | Написать  
[JS] Chart
    #39014031
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
а в общем можно не проверять. где-то внутри чарта кольцевая ссылка, поэтому освобождение var chart в области функции не приводит к уничтожению объекта.
...
Рейтинг: 0 / 0
22.07.2015, 23:18
| Ответить | Цитировать | Написать  
[JS] Chart
    #39014033
Фотография _Vasilisk_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Vasilisk_
Участник
Antonariyтогда заодно и такойТак с этого и начиналось. Или я не понял?
Antonariyгде-то внутри чарта кольцевая ссылка, поэтому освобождение var chart в области функции не приводит к уничтожению объектаО чем и и говорю_Vasilisk_Я думаю, что где-то внутри держится список чартов, отсюда и утечки
...
Рейтинг: 0 / 0
22.07.2015, 23:23
| Ответить | Цитировать | Написать  
[JS] Chart
    #39014041
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
_Vasilisk_Так с этого и начиналось. Или я не понял?Это я не понял. Подумалось, что с function и без результат может быть разный.

_Vasilisk_О чем и и говорю_Vasilisk_Я думаю, что где-то внутри держится список чартов, отсюда и утечкиЭто терминология на уровне плинтуса, ее можно понимать как угодно. Она вообще не объясняет происходящее.
"Где-то внутри" - внутри чего? "Список чартов" - специально составленный?
...
Рейтинг: 0 / 0
22.07.2015, 23:43
| Ответить | Цитировать | Написать  
[JS] Chart
    #39014763
Фотография _Vasilisk_
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
_Vasilisk_
Участник
Antonariyа такой вариант течет?

 
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
function render(AData) {
    var chart = new CanvasJS.Chart('chart', {
      data: [{
        type: 'line',
        dataPoints: []
      }]
    });
    chart.options.data[0].dataPoints = AData;
    chart.render();
}

Да
Antonariyвнутри чего?внутри библиотеки.
Antonariyтерминология на уровне плинтусаПрошу прощения. Мысль быстрее пальцев
...
Рейтинг: 0 / 0
23.07.2015, 17:08
| Ответить | Цитировать | Написать  
22 сообщений из 22, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [JS] Chart
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=39013596&tid=1445845]:
 0ms
get settings:
 12ms
get forum list:
 20ms
check forum access:
 5ms
check topic access:
 5ms
track hit:
 228ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 74ms
get tp. blocked users:
 2ms
others: 232ms
total:  588ms
созд. / загр.: 588ms
x
x
Закрыть


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