谷歌图表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);
}

我尝试在代码中添加星号，就像这样：

*

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标记打印为字符串。非常感谢您的任何帮助。

- Aamir

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>

- WhiteHat