当前位置：文江博客话题详情

JavaScript Chart.js charts chart.js3

如何在chart.js3折线图中沿y轴方向移动原点，使x轴穿过除(0,0)之外的不同点？

发布于 2025-01-16 19:56:32 字数 146 浏览 1 评论 0原文

我使用 Chart.js 绘制一个数据集，它是两个变量的比率，范围从 10 到 -10。但大多数时候它围绕 y=1 摆动。

我正在尝试借助 Chart.js3 绘制该数据集的实心线图。当填充方向低于 1（即 y<1）而不是默认 y=0 时，如何更改填充方向？

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

终弃我 2025-01-23 19:56:32

您可以为填充设置一个对象，您可以在其中进行配置：

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: 'orange',
      fill: {
        target: {
          value: 8
        },
        above: 'rgb(255, 0, 0)', // Area will be red above the value 8
        below: 'rgb(0, 0, 255)' // And blue below the value 8
      }
    }]
  },
  options: {}
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>

You can set an object for the fill in which you can configure this:

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: 'orange',
      fill: {
        target: {
          value: 8
        },
        above: 'rgb(255, 0, 0)', // Area will be red above the value 8
        below: 'rgb(0, 0, 255)' // And blue below the value 8
      }
    }]
  },
  options: {}
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>

回复收藏 0 原文

~没有更多了~

关于作者

暂无简介

文章

评论

26 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

尘曦

文章 0 评论 0

在梵高的星空下

文章 0 评论 0

善良天后

文章 0 评论 0

韬韬不绝

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

不美如何

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文