chart.js - 如何订购水平条形图 - chartJS＆amp; Chart.HorizontalBar.js - Thinbug

如何订购水平条形图 - chartJS＆amp; Chart.HorizontalBar.js

时间：2015-11-30 07:44:30

标签： chart.js

为了使用Chart.js创建水平条形图，我将Chart.HorizontalBar.js添加到我的项目中。问题是条形图从上到下按降序排列，我需要完全相反。

有没有人知道如何更改订单？我花了几个小时研究，但我找不到任何解决方案。

谢谢

drawn from top to down in descending order

<!doctype html>
<html>
    <head>
        <title>Horizontal Bar Chart</title>
        <script src="http://www.chartjs.org/assets/Chart.min.js"></script>
    <script src="../Chart.HorizontalBar.js"></script>
    </head>
    <body>
        <div style="width: 50%">
            <canvas id="canvas" class="chart-base" chart-type="type"
                    chart-data="data" chart-labels="labels" chart-legend="true">
            </canvas>
        </div>


        <script>


        var barChartData = {
            labels : ["Facebook Inc Class A","Amazon.com Inc","Allergan PLC"],
            datasets : [
                {
                    fillColor : "rgba(220,220,220,0.5)",
                    strokeColor : "rgba(220,220,220,0.8)",
                    highlightFill: "rgba(220,220,220,0.75)",
                    highlightStroke: "rgba(220,220,220,1)",
                    data : [9,8,7]
                }
            ]

        };

        window.onload = function(){
            var ctx = document.getElementById("canvas").getContext("2d");

          var chart = new Chart(ctx).HorizontalBar(barChartData, {
                responsive: true,
                barShowStroke: false,
              scaleBeginAtZero: true

                //scaleLabel: "<%=label%>"



          });
        };

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

1 个答案:

答案 0 :(得分：1)

只需在输入中交换订单，即

var barChartData = {
    labels: ["Allergan PLC", "Amazon.com Inc", "Facebook Inc Class A"],
    datasets: [{
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: [7, 8, 9]
    }]
};