2017-08-28 64 views
-1

我已经创建了一个条形图/折线图。见下: enter image description here如何在小节折线图中添加x轴?

酒吧和线是在不同的规模,即:公斤和欧元。因此,我想在图表的右侧显示该行(欧元)的xAxis比例。是否也可以向轴添加标签?

回答

1

https://jsfiddle.net/qrwvvtxs/

var barChartData = { 
 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
    datasets: [{ 
 
    label: 'Dataset 1', 
 
    yAxisID: "y-axis-1", 
 
    data: [3,2,7,4,5,7,6] 
 
    }, { 
 
    \t type: "line", 
 
    fill: false, 
 
    label: 'Dataset 2', 
 
    borderColor: '#faa', 
 
    backgroundColor: "#faa", 
 
    yAxisID: "y-axis-2", 
 
    data: [11,13,21,13,16,21,18] 
 
    }] 
 
}; 
 

 
var ctx = document.getElementById("canvas").getContext("2d"); 
 
window.myBar = new Chart(ctx, { 
 
    type: 'bar', 
 
    data: barChartData, 
 
    options: { 
 
    responsive: true, 
 
    title:{ 
 
     display:true, 
 
     text:"Chart.js Bar Chart - Multi Axis" 
 
    }, 
 
    tooltips: { 
 
     mode: 'index', 
 
     intersect: true 
 
    }, 
 
    scales: { 
 
     yAxes: [{ 
 
     display: true, 
 
     position: "left", 
 
     id: "y-axis-1", 
 
     ticks: { 
 
      callback: function(value, index, values) { 
 
      return value + " Kg"; 
 
      } 
 
     } 
 
     }, { 
 
     display: true, 
 
     position: "right", 
 
     id: "y-axis-2", 
 
     gridLines: { 
 
      drawOnChartArea: false 
 
     }, 
 
     ticks: { 
 
      callback: function(value, index, values) { 
 
      return "€ " + value; 
 
      } 
 
     } 
 
     }], 
 
    } 
 
    } 
 
});
.wrapper { 
 
    width: 100%; 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script> 
 

 
<div class="wrapper"> 
 
    <canvas id="canvas"></canvas> 
 
</div>

+0

谢谢,这competely回答我的问题。 – idontknow