2016-05-15 47 views
1

我想创建一个与angular插件而不是纯javascript的混合图表。混合图表类型 - 角度图表js

var ctx = document.getElementById("canvas").getContext("2d"); 
window.myBar = new Chart(ctx, { 
    type: 'bar', 
    data: { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
     type: 'bar', 
     label: "Visitor", 
     data: [200, 185, 590, 621, 250, 400, 95], 
     fill: false, 
     backgroundColor: '#71B37C', 
     borderColor: '#71B37C', 
     hoverBackgroundColor: '#71B37C', 
     hoverBorderColor: '#71B37C', 
     yAxisID: 'y-axis-1' 
     }, 
     { 
     label: "Sales", 
     type:'line', 
     data: [51, 65, 40, 49, 60, 37, 40], 
     fill: false, 
     borderColor: '#EC932F', 
     backgroundColor: '#EC932F', 
     pointBorderColor: '#EC932F', 
     pointBackgroundColor: '#EC932F', 
     pointHoverBackgroundColor: '#EC932F', 
     pointHoverBorderColor: '#EC932F', 
     yAxisID: 'y-axis-2' 
     } 
    ] 
    }, 
    options: { 
    responsive: true, 
    tooltips: { 
     mode: 'label' 
    }, 
    elements: { 
     line: { 
     fill: false 
     } 
    }, 
    scales: { 
     xAxes: [ 
     { 
      display: true, 
      gridLines: { 
      display: false 
      }, 
      labels: { 
      show: true, 
      } 
     } 
     ], 
     yAxes: [ 
     { 
      type: "linear", 
      display: true, 
      position: "left", 
      id: "y-axis-1", 
      gridLines:{ 
      display: false 
      }, 
      labels: { 
      show: true, 
      } 
     }, 
     { 
      type: "linear", 
      display: true, 
      position: "right", 
      id: "y-axis-2", 
      gridLines: { 
      display: false 
      }, 
      labels: { 
      show:true, 
      } 
     } 
     ] 
    } 
    } 
}); 

可以在这里看到:http://plnkr.co/edit/TvY5tz?p=preview

我已经试过吨办法对于这一点,我使用这个库http://jtblin.github.io/angular-chart.js/

在普通的JavaScript它与类似这样的东西创建用角度图做同样的事情,但我一直无法这样做。有没有人能够与库创建任何混合图表类型?如果是这样,请分享任何示例。

在此先感谢。

回答