chartjs中是否有任何选项可以将基线值从0更改为其他数字，例如50，我想使用“填充”选项，并且我想将正弦波从0更改为100如果我使用-50到50或-100到+100范围，基线是0，这是确定的，工作完美，但当我使用0到100中心不是50，是0和填充模式只是彩色的所有向下部分将chartjs中的基线值从0更改为例如50
chartjs
h7appiyu1#
是的，有{fill: {value:<value>}}。
{fill: {value:<value>}}
const data = { labels: ['E-commerce', 'Enterprise', 'Grey'], datasets: [{ label: 'random testdata', data: [12, 19, 5, 3, 3], fill: {value: 12}, }],};const config = { type: 'line', data: data, options: { maintainAspectRatio: false, }};new Chart( document.getElementById('chart'), config);
const data = {
labels: ['E-commerce', 'Enterprise', 'Grey'],
datasets: [{
label: 'random testdata',
data: [12, 19, 5, 3, 3],
fill: {value: 12},
}],
};
const config = {
type: 'line',
data: data,
options: {
maintainAspectRatio: false,
}
new Chart(
document.getElementById('chart'),
config
);
<script src="//cdn.jsdelivr.net/npm/chart.js"></script> <div class="chart" style="height:184px; width:350px;"> <canvas id="chart" ></canvas></div>
<script src="//cdn.jsdelivr.net/npm/chart.js"></script>
<div class="chart" style="height:184px; width:350px;">
<canvas id="chart" ></canvas>
</div>
ma8fv8wu2#
我应该使用fill选项，传递您希望作为基础的值。参见文档：https://www.chartjs.org/docs/latest/charts/area.html在您的用例中，fill: {value: 50}
fill: {value: 50}
const config = { type: 'line', data: { labels: ['January', 'Fabruary', 'March', 'April', 'May', 'June', 'July'], datasets: [{ data: [50, 35, 45, 47, 21, 13, 27], fill: {value: 20} }] }, options: { responsive: true, plugins: { legend: false, } },};const ctx = document.getElementById("myChart");const myChart = new Chart(ctx, config);
data: {
labels: ['January', 'Fabruary', 'March', 'April', 'May', 'June', 'July'],
data: [50, 35, 45, 47, 21, 13, 27],
fill: {value: 20}
}]
},
responsive: true,
plugins: {
legend: false,
const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, config);
.myChartDiv { max-width: 600px; max-height: 400px;}
.myChartDiv {
max-width: 600px;
max-height: 400px;
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"></script><html> <body> <div class="myChartDiv"> <canvas id="myChart" width="600px" height="400px"/> </div> </body></html>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600px" height="400px"/>
</body>
</html>
2条答案
按热度按时间h7appiyu1#
是的，有
{fill: {value:<value>}}。这里有一个简短的演示，我将如何做到这一点：
ma8fv8wu2#
我应该使用fill选项，传递您希望作为基础的值。
参见文档：https://www.chartjs.org/docs/latest/charts/area.html
在您的用例中，
fill: {value: 50}