Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [JS] Chart / 22 сообщений из 22, страница 1 из 1
17.07.2015, 15:24
    #39010006
_Vasilisk_
_Vasilisk_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JS] Chart
А посоветуйте быструю библиотечку для рисования графиков в JavaScript. Требование - отрисовка 2000 точек на линейной кривой два раза в секунду.

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

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


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

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

Она лишняя.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2015, 18:14
    #39010189
yelena
yelena
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JS] Chart
http://canvasjs.com/docs/charts/intro/high-performance-javascript-charts/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2015, 19:20
    #39010244
_Vasilisk_
_Vasilisk_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JS] Chart
Antonariyостановился на http://www.highcharts.com/ Посмотрел. Прикольная штука. Но не успевает. Понравилось, что у него нет очереди отрисовки. Т.е. если приходит новый пакет, а старый еще не закончил рисоваться, то начинается отрисовка нового пакета
user89Может такой вариант пойдет?Не хочется велосипедов. Конкретно сейчас задача - скорость отрисовки, но аппетит приходит во время еды. А поддерживать весь функционал чарта, включая масштабирование, нет желания
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2015, 19:22
    #39010246
_Vasilisk_
_Vasilisk_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JS] Chart
yelena http://canvasjs.com/docs/charts/intro/high-performance-javascript-charts/ Одним глазом глянул. Впечатлило. Будем пробовать
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.07.2015, 19:46
    #39010252
_Vasilisk_
_Vasilisk_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JS] Chart
yelena http://canvasjs.com/docs/charts/intro/high-performance-javascript-charts/ Посмотрел двумя глазами Оно. Спасибо.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2015, 16:07
    #39013556
_Vasilisk_
_Vasilisk_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JS] Chart
Из печального. Эта библиотека приводит к диким утечкам в IE10
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2015, 16:23
    #39013585
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JS] Chart
_Vasilisk_Из печального. Эта библиотека приводит к диким утечкам в IE10не поддерживай его, делов-то.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2015, 16:25
    #39013596
_Vasilisk_
_Vasilisk_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JS] Chart
Antonariyне поддерживай его, делов-то.В 43 Хроме аналогично
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2015, 16:36
    #39013618
_Vasilisk_
_Vasilisk_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JS] Chart
В 44 Хроме скорость поглощения памяти выросла в 4 раза, по сравнению с 43
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2015, 17:23
    #39013727
_Vasilisk_
_Vasilisk_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JS] Chart
Заменил функцию рендеринга. Вместо
Код: 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, 18:35
    #39013860
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JS] Chart
магия!

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

Код: 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, 22:44
    #39014008
_Vasilisk_
_Vasilisk_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JS] Chart
Antonariyмагия!Я думаю, что где-то внутри держится список чартов, отсюда и утечки. А так я чарт создаю только однажды
Antonariyа такой вариант течет?Завтра проверю. Думаю, да
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2015, 23:12
    #39014029
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JS] Chart
тогда заодно и такой

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

_Vasilisk_О чем и и говорю_Vasilisk_Я думаю, что где-то внутри держится список чартов, отсюда и утечкиЭто терминология на уровне плинтуса, ее можно понимать как угодно. Она вообще не объясняет происходящее.
"Где-то внутри" - внутри чего? "Список чартов" - специально составленный?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.07.2015, 17:08
    #39014763
_Vasilisk_
_Vasilisk_
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JS] Chart
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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [JS] Chart / 22 сообщений из 22, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 364ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1445845]:
 0ms
get settings:
 8ms
get forum list:
 18ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 45ms
get topic data:
 9ms
get forum data:
 3ms
get page messages:
 46ms
get tp. blocked users:
 1ms
others: 226ms
total:  364ms
x
x
Закрыть


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