2014-01-09 4 views
1

У меня проблема с d3 и датой. Есть ли пример, показывающий сложную гистограмму с временным измерением? Я хотел бы визуализировать действия пользователей, такие как езда на автобусе, ходьба и т. Д. В виде гистограммы. Существующие основаны на цифрах и действительно сложно понять. Я нашел этот https://gist.github.com/anotherjavadude/2940908, который кажется лучше, но все еще не ясен для меня.D3 сложенная гистограмма со временем

+1

Вы можете сделать это довольно легко с помощью [NVD3] (http://nvd3.org/ghpages/multiBar.html). –

+0

Спасибо, я перешел на HTML5. Я думаю, что d3 не подходит ни для одного стандартного графика. Он предназначен для поддержки стандартных визуализаций, и трудно изменить его предопределенный шаблон. По крайней мере, теперь мне более комфортно с чистым HTML 5 –

ответ

1

Я нашел Stacked bar-charts on time scale using D3, который, кажется, чтобы соответствовать вашим потребностям.

В любом случае, я бы предпочел пойти с Highcharts и использовать его штабелированные гистограммы как временные ряды.

На JSfiddle ниже вы можете увидеть, как именно я это сделал:

http://jsfiddle.net/fwuensche/y1w9nnod/3/

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'My energy consumption' 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 
         'Jun', 'Jul', 'Aug', 'Sep', 'Oct'] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Consumption [KWh]' 
      }, 
      stackLabels: { 
       enabled: true, 
       style: { 
        fontWeight: 'bold', 
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
       } 
      } 
     }, 

     // series data goes here 

    }); 
}); 

Надеется, что это помогает!

0

Вот пример гистограммы по дате: http://bl.ocks.org/mbostock/1134768

+0

Спасибо, я видел этот пример и пытаюсь его понять. Для новичков это слишком сложно. –

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