javascript - 使用 php 在 Google 图表时间轴中自定义工具提示

Question

开始时，我想说这里一切正常，我只是想知道如何为结果附加自定义工具提示。

我尝试添加一个新的列类型字符串和 Angular 色工具提示，并将行 v 设置为工具提示，但没有成功

PHP 生成器

$table['cols'] = array(

            array('label' => 'str1', 'type' => 'string'),
            array('label' => 'str1', 'type' => 'string'),
            array('label' => 'data1', 'type' => 'date'),
            array('label' => 'data2', 'type' => 'date')
        );

        foreach ($query as $r) {
            $date1 = new DateTime($r['data_zakupu']);
            $date2 = "Date(" . date_format($date1, 'Y') . ", " . ((int)date_format($date1, 'm') - 1) . ", " . date_format($date1, 'j') . ")";

            $date3 = new DateTime($r['data_zakupu']);
            $date3->modify("+ 1 day");
            $date4 = "Date(" . date_format($date3, 'Y') . ", " . ((int)date_format($date3, 'm') - 1) . ", " . date_format($date3, 'j') . ")";


            $temp = array();
            if (!isset($pojazd)) {
                $temp[] = array('v' => (string)$r['nr_rej']);
            } else {
                $temp[] = array('v' => (string)$r['kat']);
            }

            if ($r['kat'] === "Paliwo") {
                $alias = $r['litry'] . " L";
            } else {
                $alias = $r['kat']." - ".$r['brutto'] . " zł";
            }
            $temp[] = array('v' => (string)$alias);
            $temp[] = array('v' => (string)$date2);
            $temp[] = array('v' => (string)$date4);

            $rows[] = array('c' => $temp);
        }
        $table['rows'] = $rows;
 echo json_encode($table);

HTML + JS

<script type="text/javascript"
                        src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    var d = new Date();
    var n = d.getMonth() + 1;
    var y = d.getFullYear();

    $('#month_picker').val(n);
    $('#year_picker').val(y);

    google.charts.load("current", {packages: ["timeline"], 'language': 'pl'});
    google.charts.setOnLoadCallback(drawChart);
    $("#users").change(drawChart);

    $('#month_picker').on('change', function () {
        drawChart();
    });

    $(window).on("throttledresize", function (event) {
        drawChart();
    });

    function drawChart() {
        $.ajax({
            url: '',
            type: "POST",
            data: {
                customMonth: $('#month_picker').val(),
                customYear: $('#year_picker').val(),
            },
            dataType: 'json',
            success: function (responseText) {
                var container = document.getElementById('visualization');
                var chart = new google.visualization.Timeline(container);
                var dataTable = new google.visualization.DataTable(responseText);



                var options = {
                    timeline: {colorByRowLabel: true}
                };
                $(window).trigger('resize');
                chart.draw(dataTable, options);
            },
            error: function (jqXHR, textStatus, errorThrown) {
            }
        });
    }
    $(window).resize(function() {
        $('#visualization').height('500px');// need autoheight

    });
</script>
<div id="visualization" style="width: 100%;"></div>

由 php 生成的 JSON:https://jsonblob.com/17856337-ca0e-11e7-9220-89c8556cdc82

Answer 1

根据data format对于时间轴，
工具提示应该在第 2 列

因此，列定义如下...

$table['cols'] = array(
  array('label' => 'str1', 'type' => 'string'),
  array('label' => 'str1', 'type' => 'string'),
  array('role' => 'tooltip', 'type' => 'string'),
  array('label' => 'data1', 'type' => 'date'),
  array('label' => 'data2', 'type' => 'date')
);

然后将工具提示内容添加到每一行...

...
$temp[] = array('v' => (string)$alias);
$temp[] = array('v' => (string)$tooltip);
$temp[] = array('v' => (string)$date2);
$temp[] = array('v' => (string)$date4);

$rows[] = array('c' => $temp);