首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在chart.js图表中的线条下方添加阴影颜色?

如何在chart.js图表中的线条下方添加阴影颜色?
EN

Stack Overflow用户
提问于 2021-03-11 14:00:55
回答 1查看 152关注 0票数 1

这是我当前的折线图代码,它显示了正常的图表,但我希望线条下面有颜色阴影。我已经添加了我想做的相同的图像。

enter image description here

代码语言:javascript
复制
var myChart = new Chart("lineChart", {
      type: 'line',
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
          backgroundColor: "#F72585",
          data: [12, 19, 3, 5, 13, 3],
          fill: false,
          // borderDash: [],
          borderOffset: 0.0,
          borderJoinStyle: 'miter',
          borderBackgroundColor: '#F72585',
          pointBorderColor: '#F72585',
          // pointBorderWidth: 1,
          pointHoverRadius:5,
          pointHoverBackgroundColor: '#F72585',
          pointHoverBorderColor: '#F72585',
          // pointHoverBorderWidth: 2,
          // pointRadius: 1,
          // pointHitRadius: 10,
          tension: 0,
          borderColor: "#F72585",
          
          pointBackgroundColor: "#F72585",
          borderWidth: 1
        }
        ]
      },
      options: {
        scales: {
          yAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'Total Price'
            }
          }],
          xAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'Product Category'
            }
          }]
        },
        plugins: {
          filler: {
            propagate: true
          }
        },
        legend: {
          display: false,
        },
        tooltips: {
          callbacks: {
            label: function (tooltipItem) {
              return tooltipItem.xLabel;
            },
            title: function(tooltipItem) {
              return 'Total Price  '+tooltipItem[0].yLabel;
            }
          },
          position: 'nearest',
          intersect: false,
          yPadding: 10,
          xPadding: 10,
          caretSize: 8,
          titleFontColor: '#1A202C',
          backgroundColor: '#FFFFFF',
          bodyFontColor: 'Black',
        }
      }
    });
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-11 15:19:02

在highcharts中,可以使用图表类型'area‘。检查我在这里更新的stackblitz及其工作情况

对于Chart JS,您可以将数据集的fill属性设置为+1,这将设置数据集中从此行到下一行的backgroundColor。

代码语言:javascript
复制
datasets: [{
    label: 'India',
    data: [],
    fill: '+1',
    borderColor: '#FFC108',
    backgroundColor: 'rgba(255,193,8,0.2)'
  },
  {
    label: 'USA',
    data: [],
    fill: true,
    borderColor: '#FFC108',
    backgroundColor: 'rgba(0,0,0,0)'
  }]

在chartjs docs JSFiddle中查看此信息

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66577219

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档