相关疑难解决方法(0)

我有图表js的问题,我想像上面的图像着色图表区域

我试图从charJs Docs中找到配置,但没有匹配.它是否可以改变图表区域的背景颜色？如果可能,任何人都可以帮助我

HTML

<canvas id="barChart" width="600" height="300"></canvas>

使用Javascript

var ctx = document.getElementById("barChart");
var barChart = new Chart(ctx,{
  type: 'bar',
  data: {
    labels:["Label1","Label2","Label3","Label4"],
    borderColor : "#fffff",
    datasets: [
      {
        data: ["2","3","1","4"],
        borderColor : "#fff",
        borderWidth : "3",
        hoverBorderColor : "#000",
        backgroundColor: [
          "#f38b4a",
          "#56d798",
          "#ff8397",
          "#6970d5" 
        ],
        hoverBackgroundColor: [
          "#f38b4a",
          "#56d798",
          "#ff8397",
          "#6970d5"
        ]
      }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks:{
          min : 0,
          stepSize : 1,
          fontColor : "#000",
          fontSize : 14
        },
        gridLines:{
          color: …

在Chart.js(Chart.js)中,是否可以为高于或低于给定阈值的值设置不同的填充颜色？

我在Chart.js中找不到任何选项,有人之前做过这样的事吗？我更喜欢在Highcharts上使用Chart.js.

像这样:Highcharts的例子

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JS

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
        },
        yAxis: {
            title: {
                text: '$'
            }
        },
        title: {
            text: 'Win/Loss'
        },
        series: [{
            name: 'Avg. ($)',
            data: [546, 342, -234, -540, 103, -345],
            threshold: -1,
            negativeFillColor: 'rgba(255,0,0,0.5)',
            fillColor: 'rgba(0,204,0,0.5)',
            lineColor: 'rgba(0,0,0,1)',
            marker: {
                fillColor: 'rgba(255,255,255,1)',
                lineColor: 'rgba(0,0,0,1)',
                lineWidth: 1
            }
        },{
            name: 'User ($)',
            data: …