Horizontal-Bar-Chart angular-chart.js

Habe ich erfolgreich erstellt ein Balkendiagramm, in angular-chart.js aber das will ich jetzt ändern Sie es in ein horizontales Balkendiagramm. Außerdem möchte ich die Felder in der horizontalen Leiste selbst:

code

 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];


});

Beispiel für das, was ich will

InformationsquelleAutor user2402107 | 2015-11-10

4

Unter der Haube angular-chart.js verwendet chart.js, die keine native Unterstützung für horizontale Balkendiagramme. Das heißt, es ist ein horizontales Balkendiagramm, das plugin Hinzugefügt werden können, zur Unterstützung dieser Art von Diagramm: https://github.com/tomsouthall/Chart.HorizontalBar.js

Ich glaube, dass diese Arbeit zu machen, müssen Sie die dynamische Grafik-Richtlinie
```
<canvas id="base" class="chart-base" chart-type="type"
  chart-data="data" chart-labels="labels" chart-legend="true">
</canvas>
```
Und geben Sie dann den Typ als HorizontalBar.

kennen Sie eine funktionierende Beispiele, um zu demonstrieren?
Ich habe es funktioniert vielen Dank.
Hallo können Sie mir sagen, wie hast du es funktioniert, ich havent in der Lage gewesen. Danke.
Hier ist das Beispiel auf github: github.com/tomsouthall/Chart.HorizontalBar.js/blob/master/...
genau das, was grdneault sagte

InformationsquelleAutor grdaneault
3

für diejenigen Fragen, die hier später; es gibt neue Versionen von chart.js und angular-chart.js zur Verfügung. Chart.js 2.1 und später unterstützen die horizontale Diagramme, angular-chart.js hat eine neue Niederlassung, um die Arbeit mit den neuesten chart.js version siehe die github-repo hier.

Verwendung dieser version nicht erforderlich, die oben genannten HorizontalBar plugin von Tom Southall.

Verwenden Sie in den Beispielen unter den oben genannten angular-chart.js Website, und stellen Sie sicher, dass der Wert des class-Attributs "chart-horizontalBar".
```
<canvas id="HorizontalBar" class="chart chart-horizontalBar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
```
obigen link nicht gefunden

InformationsquelleAutor Captain Dashenka

Ich glaube nicht, dass es notwendig ist, gehören Chart.HorizontalBar.js jetzt. Dies ist, wie man ein einfaches horizontales Balkendiagramm in Eckige verwenden chart.js-

HTML-

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

JS-controller-

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'
          }
        }
    });

InformationsquelleAutor manishk

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.