Угловая диаграмма JS бар цвета на основе значения оси Y - PullRequest
Новая
       27

Угловая диаграмма JS бар цвета на основе значения оси Y

0 голосов
/ 13 июня 2019

Я использую угловой материал, а для диаграмм я использую Chart.js с помощью ng2-charts.

Итак, я хочу такой график

https://www.screencast.com/t/JQpzuohgWd

для уточнения мне нужно это в угловых

https://github.com/chartjs/Chart.js/issues/5302 (последняя скрипка)

это тоже, но не ясно (окончательный код очень грязный)

Настройка цвета для гистограммы в ng2-chart

Код: файл TS 

ngOnInit() {

var myData = [2, 10, 5, 2, 20, 30, 9];

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'bar',

  // The data for our dataset
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "Monthly goal reached",
      backgroundColor: "green",
      data: myData.map(function (value) {
        return value >= 10 ? value : null
      }),
    },
    {
      label: "Monthly goal not reached",
      backgroundColor: "red",
      data: myData.map(function (value) {
        return value < 10 ? value : null
      }),
    }
    ]
  },

  // Configuration options go here
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }

  }
});

ОШИБКА: 

Property 'getContext' does not exist on type 'HTMLElement'.

1 Ответ

0 голосов
/ 24 июня 2019

Это сработало для меня 

        for (let index = 0; index < this.barChartData[0].data.length; index++) {
          if (this.barChartData[0].data[index] <= 600) {
            this.chartColors[0].backgroundColor[index] = 'rgba(255, 205, 86,9)';
          }
          if (this.barChartData[0].data[index] > 600 && this.barChartData[0].data[index] <= 1200) {
            this.chartColors[0].backgroundColor[index] = 'rgba(255, 99, 132, 62)';
          }
          if (this.barChartData[0].data[index] > 1200) {
            this.chartColors[0].backgroundColor[index] = 'rgba(54, 162, 235)';
          }
        }

Я привел пример значений. Возьмите это как ссылку и примите к своему коду

...