Chart.js图形在Chrome和Edge上呈现不正确

whitzsjs  于 2022-11-29  发布在  Chart.js
关注(0)|答案(1)|浏览(169)

我刚刚注意到,Chart.js中的图表在Chrome和Edge上是用双X和Y轴渲染的。它们在Firefox上看起来和我想要的一样。我确信几周前它们在Chrome上是可以的。这是Graph.js中的一个bug还是我的代码有错误?
以下是它在Firefox中的外观:

这是在边缘和铬:

第二个Y轴的范围从0到1,X轴以类似Unix时间的形式表示日期,第二个轴以每4小时的时间表示。
网站是http://www.maasluip.nl/energyprice/SPOT.html第一个图形的脚本是这样的:

var ctx = document.getElementById('SpotWeek');
    var PVDay = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [
'2022-11-12 00:00:00','2022-11-12 01:00:00','2022-11-12 02:00:00','2022-11-12 03:00:00','2022-11-12 04:00:00','2022-11-12 05:00:00','2022-11-12 06:00:00','2022-11-12 07:00:00','2022-11-12 08:00:00','2022-11-12 09:00:00','2022-11-12 10:00:00','2022-11-12 11:00:00','2022-11-12 12:00:00','2022-11-12 13:00:00','2022-11-12 14:00:00','2022-11-12 15:00:00','2022-11-12 16:00:00','2022-11-12 17:00:00','2022-11-12 18:00:00','2022-11-12 19:00:00','2022-11-12 20:00:00','2022-11-12 21:00:00','2022-11-12 22:00:00','2022-11-12 23:00:00','2022-11-13 00:00:00','2022-11-13 01:00:00','2022-11-13 02:00:00','2022-11-13 03:00:00','2022-11-13 04:00:00','2022-11-13 05:00:00','2022-11-13 06:00:00','2022-11-13 07:00:00','2022-11-13 08:00:00','2022-11-13 09:00:00','2022-11-13 10:00:00','2022-11-13 11:00:00','2022-11-13 12:00:00','2022-11-13 13:00:00','2022-11-13 14:00:00','2022-11-13 15:00:00','2022-11-13 16:00:00','2022-11-13 17:00:00','2022-11-13 18:00:00','2022-11-13 19:00:00','2022-11-13 20:00:00','2022-11-13 21:00:00','2022-11-13 22:00:00','2022-11-13 23:00:00','2022-11-14 00:00:00','2022-11-14 01:00:00','2022-11-14 02:00:00','2022-11-14 03:00:00','2022-11-14 04:00:00','2022-11-14 05:00:00','2022-11-14 06:00:00','2022-11-14 07:00:00','2022-11-14 08:00:00','2022-11-14 09:00:00','2022-11-14 10:00:00','2022-11-14 11:00:00','2022-11-14 12:00:00','2022-11-14 13:00:00','2022-11-14 14:00:00','2022-11-14 15:00:00','2022-11-14 16:00:00','2022-11-14 17:00:00','2022-11-14 18:00:00','2022-11-14 19:00:00','2022-11-14 20:00:00','2022-11-14 21:00:00','2022-11-14 22:00:00','2022-11-14 23:00:00','2022-11-15 00:00:00','2022-11-15 01:00:00','2022-11-15 02:00:00','2022-11-15 03:00:00','2022-11-15 04:00:00','2022-11-15 05:00:00','2022-11-15 06:00:00','2022-11-15 07:00:00','2022-11-15 08:00:00','2022-11-15 09:00:00','2022-11-15 10:00:00','2022-11-15 11:00:00','2022-11-15 12:00:00','2022-11-15 13:00:00','2022-11-15 14:00:00','2022-11-15 15:00:00','2022-11-15 16:00:00','2022-11-15 17:00:00','2022-11-15 18:00:00','2022-11-15 19:00:00','2022-11-15 20:00:00','2022-11-15 21:00:00','2022-11-15 22:00:00','2022-11-15 23:00:00','2022-11-16 00:00:00','2022-11-16 01:00:00','2022-11-16 02:00:00','2022-11-16 03:00:00',
'2022-11-16 04:00:00','2022-11-16 05:00:00','2022-11-16 06:00:00','2022-11-16 07:00:00','2022-11-16 08:00:00','2022-11-16 09:00:00','2022-11-16 10:00:00','2022-11-16 11:00:00','2022-11-16 12:00:00','2022-11-16 13:00:00','2022-11-16 14:00:00','2022-11-16 15:00:00','2022-11-16 16:00:00','2022-11-16 17:00:00','2022-11-16 18:00:00','2022-11-16 19:00:00','2022-11-16 20:00:00','2022-11-16 21:00:00','2022-11-16 22:00:00','2022-11-16 23:00:00','2022-11-17 00:00:00','2022-11-17 01:00:00','2022-11-17 02:00:00','2022-11-17 03:00:00','2022-11-17 04:00:00','2022-11-17 05:00:00','2022-11-17 06:00:00','2022-11-17 07:00:00','2022-11-17 08:00:00','2022-11-17 09:00:00','2022-11-17 10:00:00','2022-11-17 11:00:00','2022-11-17 12:00:00','2022-11-17 13:00:00','2022-11-17 14:00:00','2022-11-17 15:00:00','2022-11-17 16:00:00','2022-11-17 17:00:00','2022-11-17 18:00:00','2022-11-17 19:00:00','2022-11-17 20:00:00','2022-11-17 21:00:00','2022-11-17 22:00:00','2022-11-17 23:00:00'],
            datasets: [{
                label: 'SPOT prijs ex BTW',
                data: [
'0.13780','0.13421','0.13001','0.12680','0.12944','0.12968','0.15800','0.17250','0.17410','0.16693','0.14185','0.13030','0.13378','0.13782','0.14988','0.20001','0.18990','0.24070','0.23800','0.19971','0.17807','0.16760','0.16127','0.15870','0.16880','0.15221','0.14300','0.12700','0.13407','0.13529','0.13529','0.15075','0.15596','0.13157','0.12031','0.13300','0.13013','0.12500','0.13746','0.14145','0.14913','0.19890','0.19797','0.17310','0.15872','0.15000','0.14200','0.13300','0.10454','0.10411','0.11910','0.10800','0.11955','0.11999','0.16720','0.21661','0.22470','0.19257','0.17470','0.16812','0.15866','0.17510','0.20732','0.21285','0.21315','0.25418','0.27039','0.19794','0.17530','0.16800','0.15791','0.15000','0.13565','0.12818','0.12899','0.10828','0.10863','0.12594','0.16405','0.21193','0.22140','0.21000','0.20010','0.19868','0.18983','0.20565','0.22216','0.22299','0.21735','0.22167','0.21501','0.21493','0.17498','0.15000','0.13876','0.13600','0.10180','0.10040','0.14255','0.09686','0.07959','0.09110','0.12074','0.22990','0.28794','0.21540','0.17442','0.16378','0.16682','0.17400','0.20107','0.22058','0.23610','0.27746','0.26486','0.20207','0.15420','0.11410','0.09948','0.06491','0.05116','0.02777','0.01633','0.00510','0.00588','0.01106','0.09491','0.18000','0.22300','0.26180','0.20550','0.17990','0.17050','0.16500','0.18000','0.17950','0.17990','0.29473','0.30000','0.23200','0.19500','0.14684','0.15150','0.13242'],
                backgroundColor: ['rgba(54, 162, 235, 1)'],
                borderColor: ['rgba(54, 162, 235, 1)'],
                borderWidth: 1,
                pointRadius: 1,
            },{
                label: 'Consumentenprijs',
                data: [
'0.24816','0.24382','0.23873','0.23485','0.23804','0.23833','0.27260','0.29015','0.29208','0.28341','0.25306','0.23908','0.24329','0.24818','0.26278','0.32343','0.31120','0.37267','0.36940','0.32307','0.29689','0.28422','0.27656','0.27345','0.28567','0.26560','0.25445','0.23509','0.24365','0.24512','0.24512','0.26383','0.27013','0.24062','0.22700','0.24235','0.23888','0.23267','0.24775','0.25258','0.26187','0.32209','0.32096','0.29087','0.27347','0.26292','0.25324','0.24235','0.20791','0.20739','0.22553','0.21210','0.22608','0.22661','0.28373','0.34352','0.35331','0.31443','0.29281','0.28485','0.27340','0.29329','0.33228','0.33897','0.33933','0.38898','0.40859','0.32093','0.29353','0.28470','0.27249','0.26292','0.24556','0.23652','0.23750','0.21244','0.21286','0.23381','0.27992','0.33786','0.34931','0.33552','0.32354','0.32182','0.31112','0.33026','0.35023','0.35124','0.34441','0.34964','0.34158','0.34149','0.29315','0.26292','0.24932','0.24598','0.20460','0.20290','0.25391','0.19862','0.17772','0.19165','0.22752','0.35960','0.42983','0.34205','0.29247','0.27959','0.28327','0.29196','0.32472','0.34832','0.36710','0.41715','0.40190','0.32593','0.26800','0.21948','0.20179','0.15996','0.14332','0.11502','0.10118','0.08759','0.08854','0.09480','0.19626','0.29922','0.35125','0.39820','0.33008','0.29910','0.28773','0.28107','0.29922','0.29862','0.29910','0.43804','0.44442','0.36214','0.31737','0.25910','0.26474','0.24165'],
                backgroundColor: ['rgba(255, 73, 17, 1)'],
                borderColor: ['rgba(255, 73, 17, 1)'],
                borderWidth: 2,
                pointRadius: 1,
            }]
        },
            options: {
              animation: false,
              scales: {
                yAxis: {
                    position: 'left',
                    beginAtZero: true,
                    title: {
                        text: 'Euro',
                        display: true
                    },
                },
                xAxis: {
                  type: 'time',
                  ticks: {
                    align: "center",
                    source: "data",
                        callback: function(value, index, values) {
                            return ((index % 24) == 0) ? value : null;}
                        },
                  offset: false,
                  padding: 1,
                  time: {
                    tooltipFormat: 'DD-MM-YYYY HH:mm',
                    displayFormats: {
                        hour: 'DD MMM'
                       }
                }
            }
        }
    }
    
});
c0vxltue

c0vxltue1#

我发现了一件事:我把我的x轴和y轴命名为xAxis和yAxis,但很明显,这已经不起作用了。把它们重命名为x和y确实修复了很多错误,但我仍然有一些图形表现不同。也许它们改变了处理的逻辑,我不知道。找不到任何关于这方面的信息。

相关问题