如何在Chart.js中解析另一种颜色到我的数据集的一半

时间:2019-03-28 19:22:22

标签: javascript python webview chart.js

因此,我想用红色显示我的一半数据,而我希望另一半用绿色。在当前设置下,所有内容均为绿色。所以我的问题是,如何解析红色到我的数据集的一半,而另一半保持绿色(当前状态)?我的数据集是一个由50个浮点数组成的列表,我将其解析为函数drawChart。

我已经尝试包含以下线程中介绍的功能:ChartJS - Different color per data point,但该功能尚未成功。任何帮助将不胜感激!

            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");
            }
          }
        };```

0 个答案:

没有答案