3

angular-chart.js で棒グラフを正常に作成しましたが、今度は横棒グラフに変更したいと考えています。また、フィールドを水平バー自体の内側に配置したいと思います。

コード

 angular.module("app", ["chart.js"])
    .controller("LineCtrl", function ($scope) {

    var x =
    {
        "labels": [
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday",
            "Sunday"
        ],
        "data": [
            99,
            59,
            80,
            81,
            56,
            55,
            40
        ],
        "type": "line",
        "series": "eventTypePerDay"
    }

    console.log(x.series);
    //ses all of the variables to build the chart
    $scope.labels = x.labels;
    $scope.colours = ['#71d078'];
    $scope.type = x.type;
    $scope.data = [x.data];
    $scope.series = [x.series];


});

私が欲しいものの例

ここに画像の説明を入力

4

3 に答える 3

4

後でここで疑問に思っている人のために。chart.js と angular-chart.js の新しいバージョンが利用可能です。Chart.js 2.1 以降は水平チャートをサポートします。 angular-chart.js には、最新の chart.js バージョンで動作する新しいブランチがあり、こちらの github リポジトリを参照してください。

このバージョンを使用する場合、上記の Tom Southall による Horizo​​ntalBar プラグインは必要ありません。

上記の angular-chart.js サイトで入手可能なサンプルを使用し、class 属性の値を「chart-horizo​​ntalBar」に設定してください。

<canvas id="HorizontalBar" class="chart chart-horizontalBar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
于 2016-06-17T03:50:29.110 に答える
4

内部的に angular-chart.js は chart.js を使用しますが、これは横棒グラフをネイティブでサポートしていません。そうは言っても、このタイプのグラフをサポートするために追加できる横棒グラフ プラグインがあります: https://github.com/tomsouthall/Chart.Horizo​​ntalBar.js

これを機能させるには、動的チャートディレクティブを使用する必要があると思います

<canvas id="base" class="chart-base" chart-type="type"
  chart-data="data" chart-labels="labels" chart-legend="true">
</canvas>

次に、タイプを として指定しますHorizontalBar。

于 2015-11-10T16:31:42.303 に答える
2

今はChart.Horizo​​ntalBar.jsを含める必要はないと思います。これは、chart.js を使用して Angular で単純な横棒グラフを取得する方法です。

HTML-

<div>
    <canvas id="bar-chart-horizontal" width="800" height="450"></canvas>
</div>

JSコントローラー-

var myChart = new Chart(document.getElementById("bar-chart-horizontal"), {
        type: 'horizontalBar',
        data: {
          labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
          datasets: [
            {
              label: "Population (millions)",
              backgroundColor: ["#ff0000", "#8e5ea2","#3cba9f","#454545","#c45850"],
              data: [2478,5267,734,784,433]
            }
          ]
        },
        options: {
          legend: { display: false },
          title: {
            display: true,
            text: 'Predicted world population (millions) in 2050'
          }
        }
    });
于 2018-04-05T08:09:55.090 に答える