Question

我正在尝试使用angular插件而不是普通的javascript创建混合图表。为此，我正在使用此库http://jtblin.github.io/angular-chart.js/

在普通的javascript中，它是用类似的东西创建的：

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

我已尝试过很多方法用角度图表做同样的事情但我无法这样做。有没有人能够用库创建任何混合图表类型？如果是这样，请分享任何例子。

提前致谢。

Answer 1

现在不可能，有一个未解决的问题需要跟踪：https://github.com/jtblin/angular-chart.js/issues/336

Answer 2

现在可以使用1.0.0-alpha8，参见here on github

混合图表类型 - Angular ChartJS

2 个答案: