2015-11-30 2 views
0

Чтобы создать горизонтальные гистограммы с использованием Chart.js, я добавил Chart.HorizontalBar.js в свой проект. Проблема в том, что бары рисуются сверху вниз в порядке убывания, и мне нужно совсем другое.Как заказать горизонтальную гистограмму - chartJS & 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

Просто поменять порядок на входе т.е.

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] 
    }] 
}; 
+0

Кстати, в настоящее время значения в диаграмме в порядке возрастания идти сверху вниз , – potatopeelings

Смежные вопросы