Comment personnaliser le graphique barchart_material de Google?

Je crée un graphique en utilisant google chart avec le type barchart_material.Comment personnaliser le graphique barchart_material de Google?

Voici le code HTML de

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

Cela fonctionne bien Demo.

Je veux personnaliser ce graphique mes exigences sont les suivantes:

Je dois changer la 1k, 2.k aux valeurs normales comme 100Mo, 200 Mo comme ça.
Ensuite, j'ai besoin d'augmenter les comptes verticaux, et les comptes horizontaux. Puis j'ai besoin de supprimer Year du graphique. Je n'ai besoin que de 2 poussettes Sales et expense.
Comment puis-je changer la couleur de la barre? et puis-je ajouter une étiquette à l'intérieur d'un graphique ?

Quand je change l'alignement sur

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

Je ne vois que trois chefs d'accusation horizontaux. Je veux ajouter plus de comptes. Je suis un peu de code après la recherche de comptes verticaux et compte horizontaux comme: Vaxis: { minValue: 0, quadrillages: { couleur: '# F3F3F3', nombre: 6 } }

Mais ceci est ne fonctionne pas maintenant. Des problèmes . Comment puis-je changer ce graphique à un nouveau niveau? besoin de changer la couleur de la barre, ajouter une étiquette, etc. Des suggestions?

Source

2016-10-22 user2986042

Vous devez écrire du code pour le faire, si vous voulez, vous pouvez changer à certaines bibliothèques de cartographie existantes – Sajeetharan

je sais que. Des liens? – user2986042

vérifier la réponse, laissez-moi savoir si vous avez besoin d'aide – Sajeetharan

Vous pouvez utiliser HighCharts pour votre puprose, il offre beaucoup d'options pour personnaliser,

graphique Même en utilisant Highcharts:

$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 
    }

Voici un sample.

Source

2016-10-22 09:05:37 Sajeetharan

ouais. je vais vérifier ce – user2986042

comment changer la couleur de la barre dans les hautes cartes? – user2986042

vous pouvez définir la couleur pour chaque série – Sajeetharan

Comment personnaliser le graphique barchart_material de Google?

Répondre

Questions connexes