Библиотека Javascript для рисования гистограмм с временной шкалой

Я хотел бы нарисовать временной ряд как гистограмму (я полагаю, это также называется диаграммой столбцов), сохраняя масштаб временной линии. Пример: enter image description here Библиотека Javascript для рисования гистограмм с временной шкалой

Не могли бы вы порекомендовать библиотеку javascript, предоставляющую код, как визуализировать его? Я хорошо знаю об этом answer и пробовал некоторые из них, но не мог приблизиться к желаемому результату.

Пример данных в JavaScript формате:

var arr = new Array(); 
arr[0] = -100; 
arr[3.5] = 10; 
arr[5] = 110;

источник

2015-06-05 Max Li

Вы посмотрели на d3? –

Да, но не смог найти способ. Кроме того, у многих библиотек есть возможность рисовать гистограмму с ярлыками, которые оставляют временную шкалу немасштабированной. –

Highcharts - лучшая библиотека – shreyansh

Посмотрите на этот код, вы можете заменить categories(in x-axis) и data с вашими собственными массивами.

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 

</head> 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"> 

</div> 
<script> 
$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Column chart with negative values' 
     }, 
     credits: { 
      enabled: false 
     }, 
     series: [{ 
     name: 'Bar Chart', 
     data: [ 

    { x: 0, y: -100 }, 
    { x: 4.9, y: 10}, 
    { x: 5, y: 100 } 
    ] 

    }] 
    }); 
}); 
</script> 
</html>

источник

2015-06-05 15:32:58 shreyansh

посмотрите, в вашем примере расстояние между столбцами -100 и 10 будет таким же, как между 10 и 110. Они ДОЛЖНЫ отличаются, т.е. 1-е расстояние должно относиться к 2-м как 3.5: 1.5 (по крайней мере, оптически). Вы можете изменить время с 3,5 до 4,99, чтобы увидеть проблему более четко. –

Я сейчас редактировал код – shreyansh

thx, это заставляет это случиться –

Взгляните на Highcharts его очень настраиваемым. Взгляните на эту fiddle, просто изменил тип на column

источник

2015-06-05 15:08:22 vlio20

вот в чем проблема. Вы можете поместить эквидистантные метки на ось X. Проблема заключается в том, как поместить числовые данные по оси X так, чтобы столбцы имели расстояние между ними в соответствии с ними. –

Библиотека Javascript для рисования гистограмм с временной шкалой

ответ

Смежные вопросы