Chart.Js:如何使用两个可变(和不同)stepSize绘制一张图表

时间:2019-02-24 16:10:47

标签: javascript plot charts chart.js

在Chart.Js中,我使用默认的“ stepSize”绘制折线图。当我将平均值添加到第二行时,为了正确查看它,我更改了uggestedMin和Max。

问题在于,这样我就失去了数组中较高值的视图(首先绘制)。所以我最终不得不正确地查看平均值或整个数组,因为它们的比例和值相距太远。

有没有一种方法可以让平均值具有一个“ stepSize”,然后在其值之后具有另一个“ stepSize”用于数组,因此我可以同时查看两者?

我遇到的问题:

Array + average plotted

我的图表代码:

myChart = new Chart(document.getElementById("canvas"), {
    "type": temp.type,
    "data": {
        "labels":column_a,
        "datasets": [{
            "label": label_b,
            "data": column_b,
            "spanGaps": true,
            "fill":fill_x,//true for charts like radar and polar area
            "backgroundColor": backgroundColor_x,
            "borderColor": borderColor_x,
            "borderWidth": borderWidth_x
            }
            ]},
            "options": {

                //legend: {
                //    display: false},
                responsive: true,
                maintainAspectRatio: false,
                tooltips: {
                    //mode: 'nearest',
                    intersect: false,
                    callbacks: {
                        afterUpdate: true,
                        label: (tooltipItem, myChart) => {
                            const realValue = myChart.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                            //const customValue = realValue.toFixed(2).replace(".", ",") + '%';// DISABLED
                            const customValue = realValue.toFixed(2).replace(".", ",");//ENABLED
                            const label = myChart.labels[tooltipItem.index] + ':';//ENABLED
                            return label + customValue;//ENABLED
                            }
                        }
                    },




                "scales": {
                    //"fit": function() {},
                    "yAxes": [{
                        "gridLines": {display:false},
                        "ticks": {
                            "suggestedMin": 0,
                            "max": max_value_1//,
                            //"stepSize": 5
                        }}]}
                        }});



window.myChart = myChart

0 个答案:

没有答案