Chart.js Canvas答案

• 为chart.js画布扩展以下示例
• 您可以设置y轴的宽度（在我的示例中为50px）

options: {
        scales: {
            y: {
                afterFit: function (scaleInstance) {
                    scaleInstance.width = 50; // sets the width to 50px
                }
            }
        }
    }

字符串

• 使用此已知值，通过滑块输入设置图形的宽度

const sliderToPercentageWidth = (sliderVal) => {
    return (50 + (containerWidth - 50) * (sliderVal/100) )
};

型

• 您还可以使用以下命令跟踪窗口调整大小时的containerWidth

window.addEventListener("resize", (event) => {
    containerWidth = container.offsetWidth;
});

型
所有这些结合在一起给予了下面的代码(also on CodePen)：

HTML

<div id="container">
    <div id="graph">
        <canvas id="myChart"></canvas>
    </div>
    <input id="width-selector" type="range" value="50">
    
</div>

型

CSS

#container{
    background-color: #ff000020;
    width: 80vw;
    height:90vh;
}

#graph{
    height: 70vh;
    width: 40vw;
    background-color: #00ff0020;
}

#width-selector{
    width: calc(100% - 50px);
    margin-left: 50px;
}

型

JS

const sliderToPercentageWidth = (sliderVal) => {
    return (50 + (containerWidth - 50) * (sliderVal/100) )
};

const rangeInput = document.getElementById("width-selector");
const graph = document.getElementById("graph");
const container = document.getElementById("container");
let containerWidth = container.offsetWidth;

// Match the slider width to graph on first render
const newWidth = sliderToPercentageWidth(rangeInput.value)
graph.style.width = `${newWidth}px`;

window.addEventListener("resize", (event) => {
    containerWidth = container.offsetWidth;
});

rangeInput.oninput = () => {
    const newWidth = sliderToPercentageWidth(rangeInput.value)
    graph.style.width = `${newWidth}px`;
};

// A basic chart
// Option for y axis width set

const ctx = document.getElementById("myChart");

new Chart(ctx, {
    type: "bar",
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [
            {
                label: "# of Votes",
                data: [12, 19, 3, 5, 2, 3],
                borderWidth: 1
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                afterFit: function (scaleInstance) {
                    scaleInstance.width = 50; // sets the width to 50px
                }
            }
        }
    }
});

型

旧的错误答案

您可以使用JS来跟踪输入滑块的值，并在它更改时设置图表的CSS样式。
这里有一个快速的例子，让你开始，因为我不能看到你正在使用的确切代码。
它有非常基本的HTML，CSS，但使用输入值（滑块）来设置使用.style.width的“图形”div的宽度。

<div class="container">
    <div id="graph"></div>
    <input id="width-selector" type="range" value="50">
</div>

.container{
    background-color: red;
    width: 50vw;
    height:70vh;
}

#graph{
    height: 50vh;
    /*  Set the default width to match the input slider value */
    width: 50%; 
    background-color:blue;
}

#width-selector{
    width: 100%;
}

const rangeInput = document.getElementById("width-selector");

const graph = document.getElementById("graph")

rangeInput.oninput = () => {
    graph.style.width = `${rangeInput.value}%`
}

如果您当前的文档与我的示例设置不同，请与我们分享您的代码&我将更新我的示例。