2

我正在尝试使用 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

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

提前致谢。

4

2 回答 2

1

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

于 2016-05-16T04:04:07.633 回答
1

现在可以使用 1.0.0-alpha8，请参见github 上的此处

于 2016-12-30T05:53:50.300 回答