javascript - ng-chartist 为图表添加图例

Question

我正在使用 ng-chartist 在我的 Angular 应用程序中绘制图表，但我遇到了问题。我正在寻找一种将图例添加到我的图表的方法。这是我所做的：

在我的 html 文件中

<div class="card-body">
    <div class="market-chart">
        <x-chartist class="board-chart ct-golden-section" [data]="chart2.data
            [type]="chart2.type" [options]="chart2.options" [events]="chart2.events">
        </x-chartist>
    </div>
</div>

在我的角度分量中

import * as chartData from '../../shared/data/chart';
...

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})

export class DashboardComponent implements OnInit {

    constructor(){}
    
    public chart2 = chartData.chart2;
    ...
    ...
}

*** 在我的 chart.ts 文件中***

export var chart2: Chart = {
  type: 'Bar',
  data: {
    series: [
      [800000, 500000, 600000, 100000, 300000, 500000, 
       200000, 400000, 400000, 300000, 500000, 200000],
      [200000, 400000, 500000, 300000, 500000, 200000, 
       100000, 100000, 100000, 400000, 200000, 400000],
      [300000, 400000, 200000, 1400000, 400000, 400000, 
       300000, 200000, 300000, 100000, 100000, 200000]
    ]
  },
  options: {
    seriesBarDistance: 12,
    stackBars: true,
    axisX: {
      showGrid: false,
      labelInterpolationFnc: function (value) {
        return value;
      }
    },
    axisY: {
      offset: 80,
      labelInterpolationFnc: function(value) {
        return value/1000 + 'k'
      },
    },
  },
  events: {
    created: (data) => {
    },
    draw: (data) => {
      if (data.type === 'bar') {
        data.element.attr({
          style: 'stroke-width: 30px'
        });
      }
    },
  }
};

输出看起来像这个网址的图像： https ://d33wubrfki0l68.cloudfront.net/cf6496793fd5dee3bf35b09424aede2a40145bff/8769b/static/8f2d5de3ea72799b49004807bda1bc09/070bd/epoch.png

谢谢

标签： javascriptangular