vaadin柱形圖中的多個類別？

我試圖建立這樣的圖表：使用vaadin-charts for angular2，除了現在我有兩種顏色，因爲我比較了兩種不同的來源。我有幾個月顯示正確，但我無法弄清楚如何將月份分爲四分之一。vaadin柱形圖中的多個類別？

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>

來源

2016-06-28 Alex Kibler

如果以下解決方案對您有幫助，請確保upvote/accept，以便其他人可以從解決方案中受益。 –

隨着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>

點擊運行代碼片段查看圖表！

就是這樣！有更多的例子here與實時數據。這裏是the component page。

來源

2017-03-03 21:28:18

vaadin柱形圖中的多個類別？

回答

相關問題