1

Laravel çerçeve ile bir bootstrap modelinde bir grafik göstermek için google grafik API kullanıyorum, bir sorun yaşıyorum çünkü çubuğun rengini değiştirmek mümkün değil ve bir mavi koymak mümkün değilim diğeri ise yeşil, bir başka mesele de sağ tarafta bana sadece barların (RX) une ismini koymasıdır. i almak İşte Google grafiğinde değişiklik çubuğu rengi

// Load the Visualization API and the corechart package. 
    google.charts.load('current', {'packages':['corechart']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    // google.charts.setOnLoadCallback(drawChart); 

    // Callback that creates and populates a data table, 
    // instantiates the pie chart, passes in the data and 
    // draws it. 
    function drawChart(nombre, unidad, tipo, valor, media) { 

    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Name'); 
    data.addColumn('number', 'RX');  
    data.addColumn({type: 'string', role: 'annotation'}); 

    data.addRows([ 
     ['Tú', parseInt(valor), valor+' '+unidad], 
     ['Media', parseFloat(media), parseInt(media)+' '+unidad], 
    ]); 

    var view = new google.visualization.DataView(data); 
    view.setColumns([0, 1,1,2]); 

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 

    chart.draw(view, { 
     // height: 400, 
     // width: 600, 
     series: { 
     0: { 
      type: 'bars' 
     }, 
     1: { 
      type: 'line', 
      color: 'grey', 
      lineWidth: 0, 
      pointSize: 0, 
      visibleInLegend: false 
     } 
     }, 
     vAxis: { 
     maxValue: 100, 
     minValue: 0, 
     } 
    }); 
    $("#myModalLabel").empty(); 
    $("#myModalLabel").append(tipo+" - "+nombre); 
    $("#modalChart").modal(); 
    } 

grafiğidir:

enter image description here

cevap

1

bu

<script type="text/javascript"> 
google.charts.load("current", {packages:['corechart']}); 
google.charts.setOnLoadCallback(drawChart); 
function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
    ["Element", "Density", { role: "style" } ], 
    ["Copper", 8.94, "#b87333"], 
    ["Silver", 10.49, "silver"], 
    ["Gold", 19.30, "gold"], 
    ["Platinum", 21.45, "color: #e5e4e2"] 
    ]); 

    var view = new google.visualization.DataView(data); 
    view.setColumns([0, 1, 
        { calc: "stringify", 
        sourceColumn: 1, 
        type: "string", 
        role: "annotation" }, 
        2]); 

    var options = { 
    title: "Density of Precious Metals, in g/cm^3", 
    width: 600, 
    height: 400, 
    bar: {groupWidth: "95%"}, 
    legend: { position: "none" }, 
    }; 
    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values")); 
    chart.draw(view, options); 
} 
</script> 

için sevdiği drawchart işlev yazabilirsiniz İşte

benim js kodu daha fazla https://developers.google.com/chart/interactive/docs/gallery/columnchart#labeling-columns

İlgili konular