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

Chart.js chart.js2

Chart.js-如何在左右绘制X和Y轴线

发布于 2025-01-28 07:18:11 字数 1480 浏览 4 评论 0 原文

我使用Chart.js V2库绘制图表。我试图设置零行，但行不通。我需要在下面的屏幕截图上绘制两行。是否可以使用一些Cinfiguration选项来绘制？

var options = {
  type: 'scatter',
  data: {
    datasets: [{
      data: [{
          x: 20,
          y: 1
        },
        {
          x: 21,
          y: 1.1
        },
        {
          x: 23,
          y: 1.4
        },
      ],
    }]
  },
  options: {
    legend: false,
    scales: {
      yAxes: [{
        ticks: {
          min: 1,
          max: 2,
          display: false,
        },
        gridLines: {
          color: 'transparent',
          display: true,
          zeroLineColor: 'red'
        },
      }],
      xAxes: [{
        ticks: {
          min: 1,
          max: 99,
        },
        gridLines: {
          color: 'transparent',
          display: true,
          zeroLineColor: 'red'
        },
      }]
    }
  }
}

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

<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

这是一个有代码的小提琴： https://jsfiddle.net/c4wotrx1/4/

原文

I use chart.js v2 library to draw a chart.
I tried to set a zero line but it's not working.
I need to draw two lines like on the screenshot below. Is it possible to draw with some cinfiguration options?

var options = {
  type: 'scatter',
  data: {
    datasets: [{
      data: [{
          x: 20,
          y: 1
        },
        {
          x: 21,
          y: 1.1
        },
        {
          x: 23,
          y: 1.4
        },
      ],
    }]
  },
  options: {
    legend: false,
    scales: {
      yAxes: [{
        ticks: {
          min: 1,
          max: 2,
          display: false,
        },
        gridLines: {
          color: 'transparent',
          display: true,
          zeroLineColor: 'red'
        },
      }],
      xAxes: [{
        ticks: {
          min: 1,
          max: 99,
        },
        gridLines: {
          color: 'transparent',
          display: true,
          zeroLineColor: 'red'
        },
      }]
    }
  }
}

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

<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

Here is a fiddle with code:
https://jsfiddle.net/c4wotrx1/4/

分享到QQ

分享到微博

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

发布评论

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

小矜持 2025-02-04 07:18:11

您需要在 xaxes 和 yaxes 上启用 Gridlines ，但请禁用 drawonchartarea ：

xAxes: [{
        ticks: {
          min: 1,
          max: 99,
        },
        gridLines: {
          color: 'red',
          display: true,
          drawBorder: true,
          drawOnChartArea: false
        },
      }],
      yAxes: [{
        gridLines: {
           color: 'red',
            display: true,
            drawBorder: true,
            drawOnChartArea: false
        }
     }]

You'll need to enable the gridLines on both xAxes and yAxes, but disable the drawOnchartArea:

xAxes: [{
        ticks: {
          min: 1,
          max: 99,
        },
        gridLines: {
          color: 'red',
          display: true,
          drawBorder: true,
          drawOnChartArea: false
        },
      }],
      yAxes: [{
        gridLines: {
           color: 'red',
            display: true,
            drawBorder: true,
            drawOnChartArea: false
        }
     }]

回复收藏 0 原文

痴骨ら 2025-02-04 07:18:11

在下面尝试，您需要保留线条，但将其隐藏在图表区域中。

您可以通过drawonchartarea：false，请参阅此

gridLines: {
        drawBorder:true,
      drawOnChartArea: false,
      color: 'red',
      display: true,
      zeroLineColor: 'red'
    },

希望这会有所帮助。

try below, you need to keep the lines but hide them in the chart area.

This you can do by drawOnChartArea: false, see this documentation

gridLines: {
        drawBorder:true,
      drawOnChartArea: false,
      color: 'red',
      display: true,
      zeroLineColor: 'red'
    },

hope this helps.

回复收藏 0 原文

~没有更多了~

关于作者

二智少女猫性小仙女

暂无简介

文章

27 人气

关注发私信

达拉崩吧

文章 0 评论 0

关注

PANGOO

文章 0 评论 0

关注

kkgtx

文章 0 评论 0

关注

WordPress小学生

文章 0 评论 0

关注

酷炫老祖宗

文章 0 评论 0

关注

硪扪都還晓

文章 0 评论 0

友情链接

文江博客

Chart.js-如何在左右绘制X和Y轴线

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

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

达拉崩吧

PANGOO

kkgtx

WordPress小学生

酷炫老祖宗

硪扪都還晓

友情链接

Chart.js-如何在左右绘制X和Y轴线

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

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

达拉崩吧

PANGOO

kkgtx

WordPress小学生

酷炫老祖宗

硪扪都還晓

友情链接

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