ChartJS–将基线设置为零以上
我正在尝试使用chart.js创建条形图。我试图让图表显示条向上，而低于1（例如0.8）的值向下。如果图表包含低于零的值，则将显示相同的图表。本质上，我试图将Y轴的基线改为1而不是0。
像这样：
共有1个答案
执行此操作的最佳方法（显然需要做更多的工作）是创建自定义轴。图.js解释了如何在此处执行此操作：
https://www.chartjs.org/docs/latest/developers/axes.html
我还创建了一个小提琴，其中数据值由设置的基线修改。我还修改了工具提示和 y 轴标签，以便所有内容都基于基线显示。它不像自定义轴那样优雅，但它速度很快，可以完成工作（假设基线已知）。你可以在这里看看小提琴：
https://jsfiddle.net/tkngc02h/1/
而且，如果您只想查看代码，这里是：
<!doctype html>
<html>
<head>
<title>Line Styles</title>
<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<style>
canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width:75%;">
<canvas id="canvas"></canvas>
</div>
<script>
var baseline = 1;
var config = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'TestData',
fill: false,
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
data: [
0 - baseline,
1.8 - baseline,
2.1 - baseline,
-0.2 - baseline,
1.3 - baseline,
-0.5 - baseline,
-0.23 - baseline,
0 - baseline
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart',
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
// Use the footer callback to display the sum of the items showing in the tooltip
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += tooltipItem.yLabel + baseline;
return label;
},
},
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value',
},
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return value + baseline;
}
}
}]
}
}
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};
</script>
</body>
</html>
-
这是我的代码。我需要在x和y轴刻度中将初始值设置为“0”。我尝试了最新的版本刻度选项。
-
我已经尝试了我能想到的一切。我似乎无法让图表尊重到达div的底部。我在此 Codepen 中复制了我的图表，以便于分叉和编辑。我基本上将我的CSS直接从开发工具复制并粘贴到代码笔中 https://codepen.io/spkellydev/pen/JwQqKr?editors=1011
-
问题内容： 在numpy中我有一个数组 将超低值设置为零的最快，最简单的方法是什么 效率不是最重要的。 问题答案： 嗯 我对此并不满意，但这似乎可行： 您可以根据自己的问题选择容忍度。我通常使用一个数量级以上 但这取决于问题。
-
我不确定需要在哪里进行更改，以便它开始指向基URI，而不是localhost(127.0.0.1:12012)。另一件事是，如果我在API调用中传递完全限定名(https://test.com/API/v1/user/1)，那么它就可以正常工作。
-
目前正在使用flyway来版本数据库脚本。我正处于我想要基线数据库版本（版本10）的位置，这样当我迁移新脚本时，它不会扫描/验证以前的脚本。 我尝试了以下陈述： 但是，当我尝试运行此语句时，我得到以下错误： 是否有人能够提供我无法对现有数据库进行基线设置的任何原因（即使Flyway基线设计用于对现有数据库进行基线设置-查看文档）？ 如有任何建议，不胜感激 谢谢
-
我试图在我的. ascx文件中复制到剪贴板。因为这是ASP. NET，所以没有将[STAThread]放在主函数上。 我收到一个错误，说明：“在进行OLE调用之前，必须将当前线程设置为单线程单元（STA）模式。请确保主函数上标记了STAThreadAttribute。” 在我的ascx里。cs文件我有