Question

我有一个由chart.js制作的horizontalBar图表，我必须在条形上再添加一种颜色。就像图表的值大于150一样，我应该将150上方（仅上方）的条形颜色设为红色。所以它的颜色从1-149开始为灰色，从150端开始为红色。

我从mysql数据库添加名称和值。到目前为止，我的脚本是：

<script>
      let myChart = document.getElementById('myChart').getContext('2d');

      //Global options
      Chart.defaults.global.defaultFontFamily = 'Lato',
      Chart.defaults.global.defaultFontSize = 18;
      Chart.defaults.global.defaultFontColor = '#666';

      let massPopChart = new Chart(myChart, {
        type:'horizontalBar',
        //bar, horizontalBar, pie, line, doughnut, radar, polarArea
        data:{
            labels:[
                <?php

                for ($i=0; $i < count($phoneNumberArr); $i++) {
                  if ($i == count($phoneNumberArr) - 1) {
                    echo "'$phoneNumberArr[$i]'";
                  }
                  else
                  {
                    echo "'$phoneNumberArr[$i]',";
                  }
                }
                 ?>
             ],
            datasets:[{
            label:'Belföldi perc',

            data:[

              <?php

                for ($i=0; $i < count($valueArr); $i++) {
                  if ($i == count($valueArr) - 1)
                  {
                    echo "'$valueArr[$i]'";
                  }
                  else
                  {
                    echo "'$valueArr[$i]',";
                  }
                }


               ?>

            ],

            backgroundColor:'rgba(0,0,0,0.6)',
            borderWidth:1,
            borderColor: '#777',
            hoverBorderWidth: 3,
            hoverBorderColor: '#FFF'
          }],

        },
        options:{
          title:{
            display: false,
            text:'Összesítő',
            fontSize:25
          },
          legend:{
            display:true,
            position:'right',
            labels:{
              fontColor:'#000'
            }
          },
          layout:{
            padding:{
              left:50,
              right:0,
              bottom:0,
              top:0
            }
          },
        }
      });
    </script>

应该看起来像这样

Answer 1

我之前解决此问题的方法是在图表js中使用堆积条形图。您应该仔细检查一下值，每当值大于150时，就在数据集1中设置150，将值大于150的值放入数据集2。如果您的金额低于150，则将金额放入数据集1，将0放入数据集2。在这里，您可以看到有关我的操作方法的示例。

var config = {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May"],
    datasets: [{
      type: 'bar',
      label: 'Dataset 1',
      backgroundColor: "blue",
      data: [150, 150, 60, 50, 40],
    }, {
      type: 'bar',
      label: 'Dataset 2',
      backgroundColor: "red",
      data: [45,25,0,0,0]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

Answer 2

Give a try with this code:

const ctx = document.getElementById('chart').getContext('2d');
const data = [150, 150, 60, 50, 40, 152, 300];

new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        fill: 'origin',
      label: "My First dataset",
            borderColor: 'black',
      data: data,
    }]
  },
  options: {
    legend: {
        display: false
    }
  },
   plugins: [{
        beforeRender: function (x, options) {
                var c = x.chart;
            var dataset = x.data.datasets[0];
            var xScale = x.scales['x-axis-0'];
            var xPos = xScale.getPixelForValue(0);
            console.log(c)
            var gradientFill = c.ctx.createLinearGradient(c.width, 0, 133.3333333333335, 0);
            gradientFill.addColorStop(0, 'red');
            gradientFill.addColorStop(xPos / c.height - 0.01, 'red');
            gradientFill.addColorStop(xPos / c.height + 0.01, 'black');
            gradientFill.addColorStop(1, 'black');
            console.log(x.data.datasets[0])
            for (var i = 0; i < x.data.datasets[0]._meta[Object.keys(dataset._meta)[0]].data.length; i++ ) {
              var model = x.data.datasets[0]._meta[Object.keys(dataset._meta)[0]].data[i]._model;
              model.backgroundColor = gradientFill;
            }
        }
    }]
})

有什么方法可以为图表中的同一条线使用2种不同的颜色？

2 个答案: