我正在使用Flask和Chart JS库来进行图形可视化。但是,我需要能够使用多个y轴(目前有2个),而且我找不到一种方法来使事情工作。我已经用列表的数据做过了,但是现在我使用类似于字典的数据,它似乎不再适合了。
下面是我的代码:
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.2.1/chartjs-plugin-zoom.min.js" integrity="sha512-klQv6lz2YR+MecyFYMFRuU2eAl8IPRo6zHnsc9n142TJuJHS8CG0ix4Oq9na9ceeg1u5EkBfZsFcV3U7J51iew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js" integrity="sha512-R/QOHLpV1Ggq22vfDAWYOaMd5RopHrJNMxi8/lJu8Oihwi4Ho4BRFeiMiCefn9rasajKjnx9/fTQ/xkWnkDACg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@2.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<div class="chart-container">
<canvas id="myChart_0">
<p> Fallback of a Graph </p>
</canvas>
</div>
<script>
const dataset_0 = [{
data: [{x:new Date('2022-10-21T00:00:00'),y:1.0},{x:new Date('2022-12-16T00:00:00'),y:2.0},{x:new Date('2023-01-20T00:00:00'),y:2.0}],
barThickness: 3.0 ,
backgroundColor: "blue" ,
pointRadius: 0.0 ,
type: "line" ,
yAxisID:'y',
borderColor: "blue" ,
label: "Graphs" ,
borderWidth: 0.0 ,
datalabels: {color: '#FFCE56'},
},
{
data: [{x:new Date('2022-10-21T00:00:00'),z:17.6},{x:new Date('2022-12-16T00:00:00'),z:16.9},{x:new Date('2023-01-20T00:00:00'),z:15.8}],
barThickness: 0.0 ,
backgroundColor: "red" ,
pointRadius: 0.0 ,
type: "bar" ,
borderColor: "red" ,
yAxisID:'z',
label: "Graph" ,
borderWidth: 1.0 ,
},
];
const data_0 = {
datasets : dataset_0
};
const config_0 = {
data: data_0,
options: {
animations:false,
responsive: true,
interaction: {
},
stacked: false,
plugins: {
title: {display: true, text: "None"},
legend: { labels: { filter: function(item, chart) { return item.text; }, boxHeight : 4, boxWidth: 20}, display: true },
},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
borderWidth : 0.001,
offset: true,
grid :{
display:true
},
},
z: {
type: 'linear',
display: true,
position: 'right',
borderWidth : 0.001,
offset: true,
grid :{
display:true
},
},
x1: {
type: "time",
display: true,
offset: true,
grid :{
display:false
},
},
},
},
};
const myChart_0 = new Chart(document.getElementById('myChart_0'), config_0);
</script>
我希望得到一个图表的比例在右边,另一个在左边,这样他们就可以得到自己的比例,因为现在的数据只是在相同的比例,它渲染不好(与目前的设置,我甚至不能看到折线图了)。
我想知道这个困难是否来自于这样一个事实,即类似于字典的输入使你同时给予标签和数据。
如果有人知道如何处理这个问题,请告诉我!
1条答案
按热度按时间sd2nnvve1#
在第二个数据集的对象中,使用x和z键定义对象。Chart.js默认查找x和y键。如果要更改此设置,使chart.js查找不同的键,则需要在数据集中进行如下配置:
或者,您可以将密钥更改为
y
,这样也可以解决您的问题