在Angular中使用Chartjs

时间:2019-05-10 16:26:37

标签: angularjs chart.js

我正在使用angularjs上的chartjs,如果我将x轴显式指定为ChartLabels,则可以按预期显示图表,但是如果尝试在下面的数据部分中包含x轴和y轴数据,则不会在图表中显示x轴坐标。 Y轴数据符合预期。

由于我有多个数据集,因此我需要为每个数据集显式设置x轴和y轴。

这是我的组件详细信息。

import { Component, OnInit } from '@angular/core';
import { Dbgrowthinfo } from '../dbgrowth-info/dbgrowth-info.component';

@Component({
selector: 'app-bargraph',
templateUrl: './bargraph.component.html',
styleUrls: ['./bargraph.component.css']
})
export class BargraphComponent implements OnInit {

constructor() { }
public barChartOptions = {
scaleShowVerticalLines: false,
responsive: true
};
public ChartType = 'line';
public ChartLegend = true;

 public ChartData = [
    {data: [{x:"2019-01-28", y:"1.1714705882352941176470588235294117647101"},
{x:"2019-01-29", y:"8.8430555555555555555555555555555555555602"},
{x:"2019-01-30", y:"8.8916666666666666666666666666666666666702"},
{x:"2019-01-31", y:"9.1368055555555555555555555555555555555602"}
], label: 'Series A'}

];

}

下面是我的html页面的内容。

   <div>
   <div style="display: block">
     <canvas baseChart
        [datasets]="ChartData"

        [options]="ChartOptions"
        [legend]="ChartLegend"
        [chartType]="ChartType">
     </canvas>
   </div>
   </div>

0 个答案:

没有答案