我正在尝试构建这样的图表: 使用vaadin-charts for angular2,除了现在我有两种颜色,因为我正在比较两种不同的来源。我已经正确地出现了几个月,但我无法弄清楚如何将月份分类到季度。
这是我到目前为止所得到的:
<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>
答案 0 :(得分:0)
使用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"]}
&#13;
<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>
&#13;
点击运行代码段以查看图表!
那就是它!还有更多带有实时数据的示例here。在这里the component page。