Wie wird das Google-Diagramm "barchart_material" angepasst?

Ich erstelle ein Diagramm mit Google Diagramm mit barchart_material Typ.Wie wird das Google-Diagramm "barchart_material" angepasst?

Hier ist der HTML-Code aus

<html> 
    <head> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 
     google.charts.load('current', {'packages':['bar']}); 
     google.charts.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Year', 'Sales', 'Expenses'], 
      ['2014', 1000, 400], 
      ['2015', 1170, 460], 
      ['2016', 660, 1120], 
      ['2017', 1030, 540] 
     ]); 

     var options = { 
      chart: { 
      title: 'Company Performance', 
      subtitle: 'Sales, Expenses, and Profit: 2014-2017', 
      }, 
      bars: 'horizontal' // Required for Material Bar Charts. 
     }; 

     var chart = new google.charts.Bar(document.getElementById('barchart_material')); 

     chart.draw(data, options); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="barchart_material" style="width: 900px; height: 500px;"></div> 
    </body> 
</html>

Das ist in Ordnung Demo arbeiten.

Ich möchte diese Grafik meine Bedürfnisse anzupassen sind:

Ich brauche die 1k, 2.k auf normale Werte wie 100 MB zu ändern, 200 MB so.
Als nächstes muss ich die vertikalen und horizontalen Zählungen erhöhen.
Dann muss ich aus dem Diagramm entfernen. Ich brauche nur 2 Kinderwagen Sales und expense.
Wie kann ich die Balkenfarbe ändern? und kann ich ein label in einem Graph hinzufügen?

Wenn ich meine Ausrichtung ändern, um

<div id="barchart_material" style="width: 700px; height: 400px;"></div>

kann ich nur 3 horizontal zählt sehen. Ich möchte mehr zählen. Ich habe einige Code nach für vertikale zählt die Suche und horizontal zählt wie: vAxis: { minValue: 0, gridlines: { Farbe: '# f3f3f3', Zahl: 6 } }

Aber das ist funktioniert jetzt nicht. Irgendwelche Probleme . Wie kann ich diese Grafik auf eine neue Ebene ändern? müssen Sie die Balkenfarbe ändern, ein Etikett usw. hinzufügen. Irgendwelche Vorschläge?

Quelle

2016-10-22 user2986042

Sie müssen Code schreiben, um dies zu tun, wenn Sie möchten, können Sie zu einigen vorhandenen Charting-Bibliotheken – Sajeetharan

ich weiß das ändern. Irgendwelche Links? – user2986042

Überprüfen Sie die Antwort, lassen Sie mich wissen, wenn Sie Hilfe benötigen – Sajeetharan

Sie HighCharts für Ihre puprose verwenden können, bietet es viele Möglichkeiten,

gleiche Diagramm mit Highcharts anpassen:

$scope.chartXLabels = ['Year', 'Sales', 'Expenses']; 
    $scope.chartSeries = [ 
    { 
    "name": "2014", 
    "data": [1000, 400] 
    }, 
    { 
    "name": "2015", 
    "data": [ 1170, 460] 
    }, 
    { 
    "name": "2017", 
    "data": [ 1170, 460] 
    } 
]; 


    console.log($scope.chartSeries); 
    $scope.chartConfig = { 
    options: { 
     chart: { 
     type: 'line' 
     }, 
     plotOptions: { 

     }, 
     yAxis: { 
     title: { 
      text: 'Usage' 
     } 
     } 
    }, 
    xAxis: { 
     title: { 
     text: 'Date' 
     }, 
     categories: $scope.chartXLabels 
    }, 
    series: $scope.chartSeries, 
    title: { 
     text: 'User Usage Monthly' 
    }, 
    credits: { 
     enabled: false 
    }, 
    loading: false 
    }

Hier ist ein sample.

Quelle

2016-10-22 09:05:37 Sajeetharan

yeah. Ich werde dies überprüfen – user2986042

, wie Balkenfarbe in hohen Diagrammen zu ändern? – user2986042

können Sie die Farbe für jede Serie – Sajeetharan

Wie wird das Google-Diagramm "barchart_material" angepasst?

Antwort

Verwandte Themen