css - 如何在不同浏览器的引导列中调整chartjs的大小

Question

我有在引导行和列中运行的 chartjs 图表。每行的列数可以动态更改。

例如，我会使用这些标记中的任何一个来重建我的行

const twoColum = spacerColumn +
                "<div class='colm col-md-5' id='col0' ></div>" +
                "<div class='colm col-md-5' id='col1' ></div>" +
                spacerColumn;

const threeColum = spacerColumn +
                "<div class='colm col-md-3' id='col0' onClick='DrillDownClick(this.id)'></div>" +
                "<div class='colm col-md-3' id='col1' onClick='DrillDownClick(this.id)'></div>" +
                "<div class='colm col-md-3' id='col2' onClick='DrillDownClick(this.id)'></div>" +
                spacerColumn + spacerColumn;

对于 IE 11，以下工作

.columnCanvas
{
    padding: 10px;
    padding-right: 0px !important;
    border: 1px solid grey;
    margin: 5px;
    margin-right: 50px;
    display: block;
    height: auto;
    width: 100%;
    position: relative;
}

和图表属性

    responsive: true,
    maintainAspectRatio: true,

但这在 Edge 或 Chrome 中不起作用。

通过将属性更改为

    responsive: false,
    maintainAspectRatio: true,   (or false,..no difference)  

它适用于 Edge、Chrome 等（引导列和行有一些重叠，我可以用 css 修复，但它不再响应屏幕大小调整，在 IE 11 中，我的图表非常小。

非常感谢

标签： cssbrowserchart.jsresize

Answer 1

我通过确定正在使用的浏览器找到了答案。

if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true))
    {
        isIEBrowser = true;
    }
    else
    {
        isIEBrowser = false;
    }

所以我在哪里建立我的图表

options:
{
    responsive: isIEBrowser,
    maintainAspectRatio: true,