Несколько категорий в столбчатой ​​диаграмме vaadin?

Я пытаюсь построить такую ​​диаграмму: chart1 с использованием vaadin-charts для angular2, за исключением того, что теперь у меня есть два цвета, потому что я сравниваю два разных источника. У меня месяцы отображаются правильно, но я не могу понять, как разделить месяцы на кварталы.

chart2

https://vaadin.com/docs/-/part/charts/webcomponents-api/charts-configuration.html#charts.configuration.axes.categories

Вот что у меня есть на данный момент:

<vaadin-column-chart>
    <chart-title>Distributions</chart-title>
    <x-axis>
        <categories>Jan, Feb, Mar, Apr, May, Jun</categories>
    </x-axis>
    <y-axis>
      <title>Value</title>
    </y-axis>
    <data-series name="exponential" [data]="exponential">
    </data-series>

    <data-series name="incremental" [data]="incremental">
    </data-series>
  </vaadin-column-chart>

angular vaadin vaadin-charts
person Alex Kibler    schedule 28.06.2016    source источник
comment
Если приведенное ниже решение помогло вам, не забудьте проголосовать / принять, чтобы другие могли извлечь выгоду из этого решения.   -  person AP.    schedule 10.03.2017

Ответы (1)


arrow_upward
0
arrow_downward

С помощью Highcharts-Chart вы можете сделать это следующим образом:

/* ==================================================||
 These can all be data-binded in a polymer app
 Example: <highcharts-chart id='chart' type="column" title="Distributions" x-axis="[[xAxisConfig]]" data="[[multiSeriesData]]" plot-options="[[joinedBarsConfig]]" y-label="Value" legend></highcharts-chart>
|| ==================================================*/

//Bind Data
chart.data = [
  {name: 'exponential', data: [1,2,4,8,16]},
  {name: 'incremental', data: [0,1,2,3,4], color: '#ec6464'},
]

//Bind PlotOptions for thin, connected bars
chart.plotOptions = {column: {
  pointPadding: 0,
  borderWidth: 0,
}}

//Make x-axis categorical
chart.xAxis = {categories: ["Jan","Feb","Mar","Apr","May","Jun"]}
<base href="https://user-content-dot-custom-elements.appspot.com/avdaredevil/highcharts-chart/v2.0.1/highcharts-chart/">
<link rel="import" href="highcharts-chart.html">

<highcharts-chart id='chart' type="column" title="Distributions" y-label="Value" legend></highcharts-chart>

Нажмите "Выполнить фрагмент кода", чтобы увидеть диаграмму!

Вот и все! Дополнительные примеры можно найти здесь с данными в реальном времени. А вот страница компонента.

person AP.    schedule 03.03.2017