Javascript 有没有办法在chart.js中显示浮动条？

我试图在浏览器上显示浮动条。 但找不到浮动条的项目。 是否无法在Chart.js中显示它

我在GitHub上找到的这个页面正在修改Chart.js

但是，我不明白如何修改它

此外，该页面似乎试图实现浮动条支持。然而，它似乎尚未实施

我将把上面介绍的浮动条页面的代码放进去。 但是，即使使用了此代码，也只显示下部。 我认为还需要修改Chart.js本身

window.chartColors = {
    red: 'rgb(255, 99, 132)',
    orange: 'rgb(255, 159, 64)',
    yellow: 'rgb(255, 205, 86)',
    green: 'rgb(75, 192, 192)',
    blue: 'rgb(54, 162, 235)',
    purple: 'rgb(153, 102, 255)',
    grey: 'rgb(201, 203, 207)'
};
window.randomScalingFactor = function() {
    // return Math.round(Samples.utils.rand(-100, 100));
    return (Math.random()*200 - 100);
};
if (document.location.hostname.match(/^(www\.)?chartjs\.org$/)) {
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-28909194-3', 'auto');
    ga('send', 'pageview');
}
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
}
var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var color = Chart.helpers.color;
var horizontalBarChartData = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
        label: 'Dataset 1',
        backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
        borderColor: window.chartColors.red,
        borderWidth: 1,
        data: [
            [20, 70],
            [-20,-70],
            [getRandomInt(10,50), getRandomInt(50,100)],
            [getRandomInt(10,50), getRandomInt(50,100)],
            [getRandomInt(10,50), getRandomInt(50,100)],
            [getRandomInt(10,50), getRandomInt(50,100)],
            randomScalingFactor(),
            randomScalingFactor()
        ]
    }, {
        label: 'Dataset 2',
        backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
        borderColor: window.chartColors.blue,
        data: [
            [-10, 30],
            [-20,-70],
            [getRandomInt(-10,-50), getRandomInt(-50,-100)],
            [getRandomInt(-10,-50), getRandomInt(-50,-100)],
            [getRandomInt(-10,-50), getRandomInt(-50,-100)],
            [getRandomInt(-10,-50), getRandomInt(-50,-100)],
            randomScalingFactor(),
            randomScalingFactor()
        ]
    }]

};
console.log(horizontalBarChartData);
window.onload = function() {
    console.log('t');
    console.log(horizontalBarChartData);
    let ctx = document.getElementById("Chart").getContext('2d');
    window.myHorizontalBar = new Chart(ctx, {
        type: 'horizontalBar',
        data: horizontalBarChartData,
        options: {
            // Elements options apply to all of the options unless overridden in a dataset
            // In this case, we are setting the border of each horizontal bar to be 2px wide
            elements: {
                rectangle: {
                    borderWidth: 2,
                }
            },
            responsive: true,
            legend: {
                position: 'right',
            },
            title: {
                display: true,
                text: 'Chart.js Horizontal Bar Chart'
            }
        }
    });
};

document.getElementById('randomizeData').addEventListener('click', function() {
    var zero = Math.random() < 0.2 ? true : false;
    horizontalBarChartData.datasets.forEach(function(dataset) {
        dataset.data = dataset.data.map(function() {
            return zero ? 0.0 : randomScalingFactor();
        });

    });
    window.myHorizontalBar.update();
});

var colorNames = Object.keys(window.chartColors);

document.getElementById('addDataset').addEventListener('click', function() {
    var colorName = colorNames[horizontalBarChartData.datasets.length % colorNames.length];
    var dsColor = window.chartColors[colorName];
    var newDataset = {
        label: 'Dataset ' + horizontalBarChartData.datasets.length,
        backgroundColor: color(dsColor).alpha(0.5).rgbString(),
        borderColor: dsColor,
        data: []
    };

    for (var index = 0; index < horizontalBarChartData.labels.length; ++index) {
        newDataset.data.push(randomScalingFactor());
    }

    horizontalBarChartData.datasets.push(newDataset);
    window.myHorizontalBar.update();
});

document.getElementById('addData').addEventListener('click', function() {
    if (horizontalBarChartData.datasets.length > 0) {
        var month = MONTHS[horizontalBarChartData.labels.length % MONTHS.length];
        horizontalBarChartData.labels.push(month);

        for (var index = 0; index < horizontalBarChartData.datasets.length; ++index) {
            horizontalBarChartData.datasets[index].data.push(randomScalingFactor());
        }

        window.myHorizontalBar.update();
    }
});

document.getElementById('removeDataset').addEventListener('click', function() {
    horizontalBarChartData.datasets.splice(0, 1);
    window.myHorizontalBar.update();
});

document.getElementById('removeData').addEventListener('click', function() {
    horizontalBarChartData.labels.splice(-1, 1); // remove the label first

    horizontalBarChartData.datasets.forEach(function(dataset) {
        dataset.data.pop();
    });

    window.myHorizontalBar.update();
});

window.chartColors={
红色：“rgb（255，99，132）”，
橙色：“rgb（25515964）”，
黄色：“rgb（25520586）”，
绿色：“rgb（75192192）”，
蓝色：“rgb（54162235）”，
紫色：“rgb（153102255）”，
灰色：“rgb（201203207）”
};
window.randomScalingFactor=函数（）{
//返回Math.round（Samples.utils.rand（-100100））；
返回值（Math.random（）*200-100）；
};
if（document.location.hostname.match（/^（www\.）？chartjs\.org$/）{
（函数（i，s，o，g，r，a，m）{i['GoogleAnalyticsObject']=r；i[r]=i[r]| |函数（）{
（i[r].q=i[r].q | |[]）.push（参数）}，i[r].l=1*新日期（）；a=s.createElement（o），
m=s.getElementsByTagName（o）[0]；a.async=1；a.src=g；m.parentNode.insertBefore（a，m）
})（窗口，文档，“脚本”，“www.google-analytics.com/analytics.js”，“ga”）；
ga（“创建”、“UA-28909194-3”、“自动”）；
ga（‘发送’、‘页面浏览’）；
}
函数getRandomInt（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min））+min；
}
var月数=[‘一月’、‘二月’、‘三月’、‘四月’、‘五月’、‘六月’、‘七月’、‘八月’、‘九月’、‘十月’、‘十一月’、‘十二月’]；
var color=Chart.helpers.color；
var horizontalBarChartData={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“数据集1”，
backgroundColor:color（window.chartColors.red）.alpha（0.5）.rgbString（），
边框颜色：window.chartColors.red，
边框宽度：1，
数据：[
[20, 70],
[-20,-70],
[getRandomInt（10,50），getRandomInt（50100）]，
[getRandomInt（10,50），getRandomInt（50100）]，
[getRandomInt（10,50），getRandomInt（50100）]，
[getRandomInt（10,50），getRandomInt（50100）]，
randomScalingFactor（），
randomScalingFactor（）
]
}, {
标签：“数据集2”，
backgroundColor:color（window.chartColors.blue）.alpha（0.5）.rgbString（），
边框颜色：window.chartColors.blue，
数据：[
[-10, 30],
[-20,-70],
[getRandomInt（-10，-50），getRandomInt（-50，-100）]，
[getRandomInt（-10，-50），getRandomInt（-50，-100）]，
[getRandomInt（-10，-50），getRandomInt（-50，-100）]，
[getRandomInt（-10，-50），getRandomInt（-50，-100）]，
randomScalingFactor（），
randomScalingFactor（）
]
}]
};
console.log（horizontalBarChartData）；
window.onload=函数（）{
console.log（'t'）；
console.log（horizontalBarChartData）；
设ctx=document.getElementById（“图表”）.getContext（“2d”）；
window.myHorizontalBar=新图表（ctx{
键入：“水平线”，
数据：水平条形图数据，
选项：{
//元素选项应用于所有选项，除非在数据集中被重写
//在本例中，我们将每个水平条的边界设置为2px宽
要素：{
矩形：{
边界宽度：2，
}
},
回答：是的，
图例：{
位置：'右'，
},
标题：{
显示：对，
文本：“Chart.js水平条形图”
}
}
});
};
document.getElementById（'randomizeData'）。addEventListener（'click'，function（）{
var zero=Math.random（）<0.2？真：假；
horizontalBarChartData.datasets.forEach（函数（数据集）{
dataset.data=dataset.data.map（函数（）{
返回0？0.0:randomScalingFactor（）；
});
});
window.myHorizontalBar.update（）；
});
var colorNames=Object.keys（window.chartColors）；
document.getElementById（'addDataset'）。addEventListener（'click'，function（）{
var colorName=colorNames[horizontalBarChartData.datasets.length%colorNames.length]；
var dsColor=window.chartColors[colorName]；
var newDataset={
标签：“数据集”+horizontalBarChartData.datasets.length，
backgroundColor:color（dsColor）.alpha（0.5）.rgbString（），
边框颜色：dsColor，
数据：[]
};
对于（var索引=0；索引0）{
var月=月[horizontalBarChartData.labels.length%月.length]；
horizontalBarChartData.labels.push（月）；
对于（var索引=0；索引

我要了一个浮动条。然而，事实上，只有一个酒吧茶