谷歌圖表y軸定制

Question

如何顯示每個Y軸編號的星形圖像或星形圖形。 例如，在條形圖中，它將類似於* 5。 所以星圖將與每個數字一起。

JS代碼

google.charts.load("current", {packages: ["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    var five = parseInt($("#fivestar").val());
    var four = parseInt($("#fourstar").val());
    var three = parseInt($("#threestar").val());
    var two = parseInt($("#twostar").val());
    var one = parseInt($("#onestar").val());
    var data = google.visualization.arrayToDataTable([
        ["Element", "Stars", {role: "style"}],
        ["5", five, "#4F9808"],
        ["4", four, "#C4C62F"],
        ["3", three, "#E4C10D"],
        ["2", two, "color: #F6D219"]
    ]);
    data.addRows([
        ["1", one, "color: #CA5006"]
    ]);

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

    var options = {
        title: "Total Ratings",
        width: 400,
        height: 358,
        bar: {groupWidth: "60%"},
        chartArea: {top:10,left:30,width: '50%', height: '50%'},
        legend: {position: "none"},
    };
    var chart = new google.visualization.BarChart(document.getElementById("chart_div"));
    chart.draw(view, options);
}

我試圖像這樣在代碼中添加star

var data = google.visualization.arrayToDataTable([
        ["Element", "Stars", {role: "style"}],
        ["<div class="star"><i class="fa fa-star" aria-hidden="true"></i></div>5", five, "#4F9808"],
        ["<div class="star"><i class="fa fa-star" aria-hidden="true"></i></div>4", four, "#C4C62F"],
        ["<div class="star"><i class="fa fa-star" aria-hidden="true"></i></div>3", three, "#E4C10D"],
        ["<div class="star"><i class="fa fa-star" aria-hidden="true"></i></div>2", two, "color: #F6D219"]
    ]);

但它不起作用..只是將html標簽打印為字符串。 任何幫助深表感謝..

Answer 1

一種方法是手動添加和定位星形元素，
基於Y軸標簽的y屬性，
這可以在圖表的'ready'事件觸發時確定

請參閱以下工作代碼段...

 google.charts.load("current", {packages: ["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var colors = ["#4F9808", "#C4C62F", "#E4C10D", "#F6D219", "#CA5006"]; var five = parseInt(1); var four = parseInt(1); var three = parseInt(2); var two = parseInt(1); var one = parseInt(1); var data = google.visualization.arrayToDataTable([ ["Element", "Stars", {role: "style"}], ["5", five, colors[0]], ["4", four, colors[1]], ["3", three, colors[2]], ["2", two, colors[3]] ]); data.addRows([ ["1", one, colors[4]] ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, {calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"}, 2]); var options = { title: "Total Ratings", width: 400, height: 358, bar: {groupWidth: "60%"}, chartArea: {top:10,left:30,width: '50%', height: '50%'}, legend: {position: "none"}, }; var container = document.getElementById("chart_div"); var chart = new google.visualization.BarChart(container); // add stars google.visualization.events.addListener(chart, 'ready', function () { var colorIndex = 0; Array.prototype.forEach.call(container.getElementsByTagName('text'), function(text) { if ((text.getAttribute('text-anchor') === 'end') && (text.getAttribute('fill') === '#222222')) { var stars = document.getElementById("star_div"); var star = stars.appendChild(document.createElement('i')); star.className = "fa fa-star star"; star.style.color = colors[colorIndex]; star.style.top = (parseFloat(text.getAttribute('y'))) + 'px'; colorIndex++; } }); }); chart.draw(view, options); } 

 .ratings { display: inline-block; padding: 6px; text-align: right; vertical-align: top; } .star { position: absolute; } #star_div { width: 16px; } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> <div> <div class="ratings" id="star_div"></div> <div class="ratings" id="chart_div"></div> </div>