如何在Chartjs中使用折线图为每个Y刻度的X轴创建黑边框

v9tzhpje  于 2023-06-05  发布在  Chart.js
关注(0)|答案(1)|浏览(274)

我想有黑色的边界在每一个边界的X轴的Y尺度。我怎么能做到这一点,并有一个边界,从0开始的x轴。所以我希望每个x轴都有黑色边框,边框的值应该为0。(我只是分享了y1和y2,但实际上在我的代码中也有y3和y4)以下是我的刻度代码:

scales: {
                x: {
                    type: "linear",
                    position: "left",
                    max: this.res.maxs[0],
                    min: 0,
                    gridLines: {
                        display: true,
                    },
                },

                y1: {
                    type: "linear",
                    position: "left",
                    stack: "demo",
                    stackWeight: 1,
                    max: this.res.maxs[4],
                    min: 0,
                    title: {
                        display: true,
                        text: this.axisLabels[3],
                        font: {
                            size: 11,
                        },
                    },
                },
                y2: {
                    type: "linear",
                    position: "left",
                    stack: "demo",
                    stackWeight: 1,
                    grid: {
                        borderColor: "blue",
                    },
                    max: this.res.maxs[2],
                    min: -10,
                    title: {
                        display: true,
                        text: this.axisLabels[1],
                        font: {
                            size: 11,
                        },
                    },
                    ticks: {
                        callback: (value, index, values) =>
                            index == 0 ? undefined : value.toFixed(1),
                    },
                },

               
            }
pxy2qtax

pxy2qtax1#

一个安全的解决方案是使用具有line annotation的插件chartjs-plugin-annotation
y2轴底部的直线可以通过以下选项获得:

options:{
    // other options .....
    plugins: {
        // other plugins .... 
        annotation: {
            annotations: {
                line_y2_bottom: {
                    type: 'line',
                    scaleID: 'y2',
                    value: function({chart}, props){
                        const scale = chart.scales[props.scaleID];
                        return scale.getValueForPixel(scale.bottom - 1) || scale.min;
                    },
                    borderColor: 'black',
                    borderWidth: 3,
                },
            }
        }
    }
}

如果先验已知,则value可以设置为固定数值。然而,value以及大多数其他属性是可脚本化的,这在这种情况下是一个很大的优势,当轴具有offset: true时,因此实际的最小值(以及最大值)不仅由数据决定,而且还由使所有轴适合可用空间的目标决定。
在上面的例子中,id是任意的,我选择它对人类有意义,唯一的要求是每个注解都有不同的id
在每个图表底部绘制一条线的最小代码段示例:

const x = Array.from({length: 101}, (_, i)=>({x: i/100}));
const data = {
    datasets: [
        {
            data: x.map(({x})=>({x, y: Math.exp(x+1)})),
            borderColor: 'red',
            yAxisID: 'y1'
        },
        {
            data: x.map(({x})=>({x, y: Math.exp(-x+1)})),
            borderColor: 'blue',
            yAxisID: 'y2',
        },
        {
            data: x.map(({x})=>({x, y: Math.sin(x+1)})),
            borderColor: 'green',
            yAxisID: 'y3',
        }
    ]
};
const config = {
    type: 'line',
    data: data,
    options: {
        responsive: true,
        aspectRatio: 1,
        plugins: {
            legend: {
                display: false,
            },
            annotation: {
                annotations: Object.fromEntries(['y1', 'y2', 'y3'].map(
                    scaleID => [
                        `line_${scaleID}_bottom`,
                        {
                            type: 'line',
                            scaleID,
                            value: function({chart}, props){
                                const scale = chart.scales[props.scaleID];
                                return scale.getValueForPixel(scale.bottom-1) || scale.min;
                            },
                            borderColor: 'black',
                            borderWidth: 3,
                        }
                    ])
                )
            }
        },

        scales: {
            x: {
                type: 'linear',
            },
            y1: {
                stack: 'demo',
                offset: true,
                stackWeight: 1,
            },
            y2: {
                stack: 'demo',
                stackWeight: 2,
                border:{
                    color: 'black',
                    width: 2
                },
                offset: true
            },
            y3: {
                stack: 'demo',
                offset: true,
                stackWeight: 1
            }
        }
    },
};
new Chart(document.querySelector('#chart1'), config);
<div style="width: 95vw">
   <canvas id="chart1"></canvas>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.0/chart.umd.js" integrity="sha512-CMF3tQtjOoOJoOKlsS7/2loJlkyctwzSoDK/S40iAB+MqWSaf50uObGQSk5Ny/gfRhRCjNLvoxuCvdnERU4WGg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/3.0.1/chartjs-plugin-annotation.min.js" integrity="sha512-Hn1w6YiiFw6p6S2lXv6yKeqTk0PLVzeCwWY9n32beuPjQ5HLcvz5l2QsP+KilEr1ws37rCTw3bZpvfvVIeTh0Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

相关问题