2

プレーンな javascript の代わりに angular プラグインを使用して混合チャートを作成しようとしています。そのために、私はこのライブラリ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

angular-chart で同じことを行う方法をたくさん試しましたが、できませんでした。ライブラリを使用して混合グラフ タイプを作成できた人はいますか? もしそうなら、例を教えてください。

前もって感謝します。

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 に答える