Как создать линейный график, используя график js - PullRequest
Новая
       28

Как создать линейный график, используя график js

0 голосов
/ 16 апреля 2020

Я пытаюсь создать диаграмму в своем приложении angular, используя диаграмму js, как изображение, к которому я прикрепил. Мне удалось создать диаграмму, но как я могу создать эти плюсы в сетках и во всплывающей подсказке? , пожалуйста, смотрите прикрепленное изображение и дайте мне знать, как я могу добавить это. Также, пожалуйста, найдите код ниже, который я создал для диаграммы.

Ссылочное изображение для диаграммы js:

enter image description here

@ViewChild('myCanvas')
  public canvas: ElementRef;
  public context: CanvasRenderingContext2D;
  public chartType: string = 'line';
  public chartData: any[];
  public chartLabels: any[];
  public chartColors: any[];
  public chartOptions: any;

  ngOnInit() {

    this.chartData = [{
      data: [50, 20, 40, 20, 50, 80],
      fill: false,
    }];
    this.chartLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'june'];
    this.chartColors = [{
      backgroundColor: 'rgba(0, 0, 0, 0.2)',
         borderColor: 'rgba(0, 0, 0, 1)'
    }];
    this.chartOptions = {
      legend: {
        display: false
      },
      tooltips
        enabled:false
      },
      scales: {
        xAxes: [{
          gridLines: {
            display: true,
          },
          ticks: {
            fontSize: 10,
            fontColor: 'lightgrey'
          }
        }],
        yAxes: [{
          gridLines: {
            drawBorder: false,
            borderDash: [8, 59.8],
          },
          ticks: {
            fontSize: 10,
            fontColor: 'lightgrey',
            maxTicksLimit: 5,
            padding: 5,
            steps : 10,
            stepValue : 10,
            max : 100,
            min: 20,
          }
        }]
      }
    }
  };
...