Question

我正在尝试在浏览器上显示浮动条。但是找不到浮动栏项目。无法在Chart.js中显示它？

我在GitHub上发现的此页面正在修改Chart.js。

https://github.com/chartjs/Chart.js/pull/5262

http://pravopys.net/chartjs/samples/charts/bar/horizontal.html

但是，我不知道如何修改它。

此外，此页面似乎正在尝试实现浮动条支持。但是，它似乎尚未实现。

https://github.com/chartjs/Chart.js/pull/6056

我将放置上面介绍的浮动条页面的代码。但是，即使使用此代码，也仅显示下部。我认为也有必要修改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();
});

我要求一个浮标。但是，实际上，仅显示了条形图。如果您无法在Chart.js中做到这一点，那么如果您可以显示其他可能的库，我将不胜感激。

Answer 1

自Chart.js v2.9.0起，

浮动栏正式可用。该功能已与chartjs:master合并到pull request #6056中。现在可以使用语法[min, max]来指定各个小节。

<html>

<head>
  <title>Floating Bars</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
  <style>
    canvas {
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
    }
  </style>
</head>

<body>
  <div>
    <canvas id="canvas" height="100"></canvas>
  </div>
  <script>
    window.onload = function() {
      var ctx = document.getElementById('canvas').getContext('2d');
      window.myBar = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
          labels: [1, 2, 3, 4, 5],
          datasets: [{
            label: 'data',
            data: [[-3, 5], [2, 10], [1, 3], [-4, -1], [4, 8]],
            backgroundColor: 'lightblue'
          }]
        },
        options: {
          responsive: true,
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: 'Horizontal Floating Bars'
          }
        }
      });
    };
  </script>
</body>

</html>

Answer 2

!!!注意：看来，它只能在修改后的v2.7.3版本中使用！！
使用Chart.js可以浮动条形图。这里是直接来自Chart.js网站的示例链接。 Chart js - floating vertical bar chart

<!doctype html>
<html>
<head>
    <title>Bar Chart</title>
    <script src="Chart.bundle.min.js"></script>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>

<body>

    <div id="container" style="width: 75%;">
        <canvas id="canvas"></canvas>
    </div>
    <script>

        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)'
        };

        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min)) + min;
        }

        var randomScalingFactor = function() {
            return Math.ceil(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
        };

        var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        var color = Chart.helpers.color;
        var barChartData = {
            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]
                ]
            }, {
                label: 'Dataset 2',
                backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                borderColor: window.chartColors.blue,
                borderWidth: 1,
                data: [
                    [-10, 30],
                    [-20,-70]
                ]
            }]

        };

        window.onload = function() {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myBar = new Chart(ctx, {
                type: 'bar',
                data: barChartData,
                options: {
                    responsive: true,
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Chart.js Bar Chart'
                    }
                }
            });
        };

    </script>
</body>
</html>

!!!注意：看来，它只能在修改后的v2.7.3版本中使用！！
我认为这是一个错误，无法在最新版本中使用。

有什么方法可以在chart.js中显示浮动条？

2 个答案: