我正在创建一个图表,使用chart js呈现一些数据.

  const data = {
    labels: ["1 Dec", "8 Dec", "16 Dec", "31 Dec"],
    datasets: [
      {
        label: "Sales Made",
        data: [3, 7, 4, 5],
        borderColor: ["#03A9F5"],
      },
    ],
  };
  const options = {
    tension: 0.4,
    title: {
      display: true,
      text: "linechrt",
    },
    scales: {
      y: [
        {
          display: true,
          stacked: true,
          ticks: {
            beginAtZero: true,
            steps: 10,
            stepValue: 5,
            min: 0,
            max: 100,
          },
        },
      ],
    },
  };

现在我已经看过了在线教程,甚至是文档,但我还没有得到how to paint the area below the line.个图表的明确答案.JS有很多版本,以前对这个问题的答案,尤其是在Stack上,似乎不起作用.

对于其他图表,如条形码

backGroundColor: ["red"]

在datasets对象上运行良好,但如果我try 对折线图执行相同的操作,则不会

<Line data={data} options={options} />

推荐答案

您需要在数据集中将fill设置为true.根据你是否使用树形技巧,你还需要从图表中导入并注册filler.js.

  const data = {
    labels: ["1 Dec", "8 Dec", "16 Dec", "31 Dec"],
    datasets: [
      {
        label: "Sales Made",
        data: [3, 7, 4, 5],
        borderColor: ["#03A9F5"],
        fill: true,
        backgroundColor: 'pink'
      },
    ],
  };

Javascript相关问答推荐

JavaScript:循环访问不断变化的数组中的元素

当promise 在拒绝处理程序被锁定之前被拒绝时,为什么我们会得到未捕获的错误?

如何使用侧边滚动按钮具体滚动每4个格?

django无法解析余数:[0] from carray[0]'

无法在nextjs应用程序中通过id从mongoDB删除'

为什么ngModel不能在最后一个版本的Angular 17上工作?'

如何粗体匹配的字母时输入搜索框使用javascript?

为什么当我解析一个promise时,输出处于挂起状态?

在拖放时阻止文件打开

将数组扩展到对象中

如何在我的Next.js项目中.blob()我的图像文件?

自定义确认组件未在vue.js的v菜单内打开

打字脚本中方括号符号属性访问和拾取实用程序的区别

用Reaction-RT-Chart创建实时条形图

通过解构/功能组件接收props-prop验证中缺少错误"

递增/递减按钮React.js/Redux

我如何才能获得价值观察家&对象&S的价值?

限制数组中每个元素的长度,

如何使pdf.js上的文本呈现为可选?

我如何才能让p5.js在不使用实例模式的情况下工作?