Как разобрать другой цвет с половиной моего набора данных в chart.js - PullRequest
0 голосов
/ 28 марта 2019

Итак, я хотел бы визуализировать половину моих данных красным, а другую - зеленым. С текущей настройкой все в зеленом. Итак, мой вопрос: как мне разобрать красный цвет для половины моего набора данных, в то время как другая половина остается зеленой, как в настоящее время? Мой набор данных представляет собой список, состоящий из 50 чисел с плавающей точкой, которые я анализирую для функции drawChart.

Я уже пытался включить функцию, которая была объяснена в следующем потоке: ChartJS - разные цвета для каждой точки данных , но пока не удалось. Любая помощь будет принята с благодарностью!

            var ctx = document.getElementById("myChart");
            ctx.style.backgroundColor = 'rgb(21,43,42)';
            var myChart = new Chart(ctx, {
              type: 'bar',
              data: {
                labels: x,
                datasets: [
                  {
                    label: 'Initial',
                    data: y,
                    backgroundColor: "rgba(58, 98, 87, 0.5)"
                  }, {
                    label: 'Profit',
                    data: z,
                    backgroundColor: "rgba(51, 204, 51, 0.9)"
                  }
                ]
              },
              options: {
                legend: {
                  display: false
                },
                scales: {
                    xAxes: [{
                        gridLines: {
                          display: false
                        },
                        stacked: true,
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: w,
                            fontSize: 16,
                            fontColor: 'white'
                        },
                        ticks: {
                          fontColor: 'white'
                        }
                    }],
                    yAxes: [{
                        gridLines: {
                          color: 'rgba(153,153,153,0.2)'
                        },
                        stacked: true,
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: "Order size",
                            fontSize: 16,
                            fontColor: 'white'
                        },
                        ticks: {
                          fontColor: 'white'
                        }
                    }]
                 },
                tooltips: {
                    displayColors: false,
                    callbacks: {
                        title: function(tooltipItem) {
                          return `${w}: ${String(tooltipItem[0].xLabel)}`;
                        },
                        label: function(tooltipItemY) {
                            return "Total: " + `${Number(tooltipItemY.yLabel)}`;
                        }
                    }
                  }
                }
            });
            for (i = 0; i < myChart.data.datasets[0].data.length; i++) {
            if (myChart.data.datasets[0].data[i] > 25) {
                y.backgroundColor.push("#90cd8a");
            } else {
                y.backgroundColor.push("#f58368");
            }
          }
        };```
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...