javascript - 以刻度为单位的 HTML - Google 图表 - 列

Question

有没有人想出如何在 google 图表的刻度线中使用 html？我正在尝试从 http://erikflowers.github.io/weather-icons 添加天气图标

这是我试过的:

const dailyData = new google.visualization.DataTable();
        dailyData.addColumn('timeofday', 'Hour');
        dailyData.addColumn('number', 'Visits');

        let mTicks = [];

        for(let i: number = 8; i <22; i++) {

            let timeofday: any = [parseFloat(parsedData[0].data[i].name[1]),0,0];

            let weatherIcon = '-';

            if(parsedData[0].data[i].weather_code > 0) {

                let weather = new WeatherFunctions(parsedData[0].data[i].weather_code).getResult();

                weatherIcon = weather.icon;
            }

            let fullString: string = `${i}:00 <br/> ${weatherIcon}`;

            dailyData.addRow([timeofday, parsedData[0].data[i].visits]);
            mTicks.push({v: timeofday, f: fullString});
        }


        const options: any = {
            allowHTML: true,
            legend: {
                position: 'none'
            },

            hAxis: {
                ticks:mTicks
                ,
                title: 'Time - Weather - Temperature'
            }
        };

其中完整字符串 = "8:00 <i class="wi wi-day-sunny-overcast"></i>" .

然而，字符串中的任何 html 都意味着刻度不显示。

Answer 1

由于图表是使用 SVG 构建的，
包含在图表元素中时不支持 HTML
(工具提示除外)

但是，该图表提供了可用于定位 HTML 覆盖的方法

在图表的'ready' 事件上，您可以使用图表方法 --> getChartLayoutInterface()

接口(interface)有一个方法 --> getBoundingBox()
提供图表元素的 ID，它将返回坐标

获取第一个x轴标签的位置...

var chartLayout = chart.getChartLayoutInterface();
var labelBounds = chartLayout.getBoundingBox('hAxis#0#label#0');

使用这些坐标定位您的 HTML 叠加层

请参阅以下工作片段，
在每个 x 轴标签之后添加一个图像...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('timeofday', 'Hour');
  data.addColumn('number', 'Visits');
  data.addRows([
    [[0, 0, 0, 0], 10],
    [[0, 1, 0, 0], 11],
    [[0, 2, 0, 0], 12],
    [[0, 3, 0, 0], 13],
    [[0, 4, 0, 0], 14],
    [[0, 5, 0, 0], 15],
    [[0, 6, 0, 0], 16],
    [[0, 7, 0, 0], 17],
    [[0, 8, 0, 0], 18],
    [[0, 9, 0, 0], 19],
    [[0, 10, 0, 0], 20],
    [[0, 11, 0, 0], 21],
    [[0, 12, 0, 0], 22],
    [[0, 13, 0, 0], 23]
  ]);

  // build chart ticks
  var xAxisTicks = [];
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    xAxisTicks.push({
      v: data.getValue(i, 0),
      f: data.getFormattedValue(i, 0)
    });
  }

  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 60,
      left: 60,
      right: 60,
      bottom: 60
    },
    hAxis: {
      ticks: xAxisTicks
    },
    height: '100%',
    legend: {
      position: 'top'
    },
    width: '100%'
  };

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

  var tickIcons = [];
  google.visualization.events.addListener(chart, 'ready', function () {
    // remove old ticks
    var index = tickIcons.length;
    while (index--) {
      container.removeChild(tickIcons[index]);
      tickIcons.pop();
    }

    // add ticks
    var chartLayout = chart.getChartLayoutInterface();
    var labelPadding = 2;
    xAxisTicks.forEach(function (tick, index) {
      var labelBounds = chartLayout.getBoundingBox('hAxis#0#label#' + index);
      var tickIcon = document.createElement('IMG');
      tickIcon.className = 'tickIcon';
      tickIcon.src = 'http://findicons.com/files/icons/512/star_wars/16/clone_old.png';
      tickIcon.style.left = (labelBounds.left + labelBounds.width + labelPadding) + 'px';
      tickIcon.style.top = labelBounds.top + 'px';
      tickIcons.push(container.appendChild(tickIcon));
    });
  });

  drawChart();
  window.addEventListener('resize', drawChart, false);
  function drawChart() {
    chart.draw(data, options);
  }
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

.tickIcon {
  position: absolute;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_div"></div>