图表js的横线在y轴上为负/正]

问题描述 投票:0回答:1

chartjs中是否有一种方法可以使条形图跨越零线?举个例子,可以说我有一个带有

的酒吧
data:[x:1, y:100]

我如何告诉它将y轴的范围从-100扩展到100(而不是从0扩展到100)?

我在这里有一个游乐场,每个小节我可以做负数或正数,但一个小节不能同时做。

https://jsbin.com/dufonoceja/1/edit?js,output

chart.js
1个回答
0
投票
由于支持Chart.js v2.9.0floating bars可以执行此操作。现在可以使用语法[min, max]指定各个条。

<html> <head> <title>Floating Bars</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <style> canvas { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } </style> </head> <body> <div> <canvas id="canvas" height="120"></canvas> </div> <script> var chartData = { labels: [1,2,3,4,5,6], datasets: [{ type: 'bar', label: 'Red Bar', borderColor: 'black', borderWidth: 1, backgroundColor: 'rgba(128,0,0,0.2)', data: [[0, 100], [-100, 100], [-30, 40], 0, 0, 0], }, { type: 'bar', label: 'Green Bar', backgroundColor: 'rgba(0,128,0,0.2)', borderColor: 'black', borderWidth: 1, data: [0, 0, 0, 0, [-50, 70], 100], } ] }; window.onload = function() { var ctx = document.getElementById('canvas').getContext('2d'); window.myBar = new Chart(ctx, { type: 'bar', data: chartData, options: { scaleBeginAtZero: false, responsive: true, spanGaps: true, tooltips: { mode: 'index', intersect: true }, scales: { xAxes: [{ gridLines: { display: false }, }], yAxes: [{ type: 'linear', ticks: { beginAtZero: false, min:-100, max:100, stepSize:30 } }], } } }); }; </script> </body> </html>
© www.soinside.com 2019 - 2024. All rights reserved.