2016-01-22 3 views
3

В настоящее время я создаю приложение, в котором я хочу отображать гистограммы. Проблема в том, что я не могу должным образом отобразить гистограмму с помощью zingchart ... Я хочу, чтобы пометить шкалы-x по каждой стороне точек данных, а не центрировать их, поскольку они представляют границы гистограмм.Как правильно построить гистограмму с помощью ZingChart?

Ниже приведена функция python, которая вычисляет данные для создания гистограммы с использованием функции гистограммы в пакете numpy.

from numpy import histogram 

def graph(self): 

    results = sorted(results, key=lambda x: mark) 
    marks = [result.mark for result in results] 

    maximum = 20 
    divisor = maximum 
    step = maximum/divisor 

    data, bin_edges = histogram(a=marks, range=(0, maximum), bins=divisor) 
    data = data.tolist() 

    return {'data': data, 'divisor': divisor, 'maximum': maximum, 'step': step} 

Затем эта гистограмма данные используются в целях визуализации Зин диаграммы графа (Это шаблон jinja2 как я использую Колба-основа):

<script> 
    var chartData = { 
     "type": "bar", 
     "plot": { 
      "aspect": "histogram", 
     }, 
     "plotarea": { 
      "adjust-layout": true, 
     }, 
     "series": [ 
      {"values": {{ graph['data'] }}}, 
     ], 
     "scale-x": { 
      "progression": "lin", 
      "min-value": 0, 
      "max-value": {{ graph['maximum'] }}, 
      "step": {{ graph['step'] }}, 
      "decimals": 1, 
     }, 
    }; 

    zingchart.render({ 
     "id": "graph1", 
     "data": chartData, 
     "width": "100%", 
     "height": "400px", 
     }); 
</script> 

ответ

4

РЕДАКТИРОВАТЬ

Чтобы компенсировать положение шкалы-x, вы просто добавляете атрибут offsetX к scaleX.item. Вот пример ...

scaleX: { 
    item: { 
    offsetX: 20 
    } 
} 

поведение по умолчанию ZingChart гистограмм иметь засечки, расположенные на каждой стороне точки данных. Я разместил некоторые фиктивные данные в вашей диаграмме JSON и отобрал ее. Это то, что он показывает.

histogram demo chart

Вы можете просмотреть график здесь: http://demos.zingchart.com/view/GQEQHWVV

Можете ли вы предоставить более глубокое представление о проблеме, которую вы пытаетесь решить? Могут быть проблемы с данными, которые вы передаете. Насколько я могу судить, ZingChart правильно отображает гистограммы.

FYI: Я в команде ZingChart

+0

Хорошо, может быть, я был немного неясно. Клещи правильно размещены, но этикетки расположены под планкой, я хочу, чтобы они были сосредоточены на клещах. Я обрабатываю метки, поэтому, если мы рассматриваем ваш график как результат, первая строка представляет число студентов, у которых есть отметка между 0 и 1. – natolh

+0

Вот [выход JSON] (https://codeshare.io/5iYDI) по приложению. – natolh

+1

Я отредактирую ответ, чтобы включить решение –

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