ChartJS 使用Chart JS的多个Y轴,数据作为字典

yc0p9oo0  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(209)

我正在使用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>

我希望得到一个图表的比例在右边,另一个在左边,这样他们就可以得到自己的比例,因为现在的数据只是在相同的比例,它渲染不好(与目前的设置,我甚至不能看到折线图了)。
我想知道这个困难是否来自于这样一个事实,即类似于字典的输入使你同时给予标签和数据。
如果有人知道如何处理这个问题,请告诉我!

sd2nnvve

sd2nnvve1#

在第二个数据集的对象中,使用x和z键定义对象。Chart.js默认查找x和y键。如果要更改此设置,使chart.js查找不同的键,则需要在数据集中进行如下配置:

{
  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}],
  parsing: {
    yAxisKey: 'z'
  }
}

或者,您可以将密钥更改为y,这样也可以解决您的问题

相关问题