Question

我的页面中有一个类似于以下示例的图表：

＆＃13;

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor() {
      var dataTable = new google.visualization.DataTable();
      dataTable.addColumn("date", "Data");
      dataTable.addColumn("number", "T0 (%)");
      dataTable.addColumn("number", "T1 (%)");
      dataTable.addColumn("number", "T2 (%)");
      dataTable.addColumn("number", "T3 (%)");
      dataTable.addColumn("number", "OEE (%)");
      dataTable.addColumn("number", "OEE Médio");

      dataTable.addRows([
        [new Date(2017, 04, 02, 13, 01, 25, 00), 100, 100, 38.6, 100, 38.6, 89],
        [new Date(2017, 04, 02, 13, 32, 33, 00), 97, 92, 55.6, 100, 46.6, 89],
        [new Date(2017, 04, 02, 14, 00, 01, 00), 75, 89, 45.8, 88, 55.5, 89],
        [new Date(2017, 04, 02, 14, 35, 07, 00), 68, 75, 57.9, 99, 33.1, 89]
      ]);
      
      var date_formatter = new google.visualization.DateFormat({
                    pattern: "dd/MM/yyyy HH:mm:ss"
          });
      date_formatter.format(dataTable, 0);

      var options = {
        hAxis: {
          title: 'Linha do tempo'
        },
        vAxis: {
          title: '(%)',
          viewWindow: {
            min:0,
            max: 120
          }
        },
        explorer: {
          axis: 'horizontal',
          keepInBounds: true,
          maxZoomIn: 0.05
        },
        legend: { position: 'top' },
        colors: ['#772583', '#e05206', '#d28ac8', '#ecc200', '#69be28', '#0073cf'],
        pointSize: 4
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(dataTable, options);
    }

＆＃13;

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

＆＃13;

当用户移动到该点时，显示日期时间和行的值。我需要在此标签中添加新信息。每行的该值可以是不同的。我的意思是在datatable中添加这些信息，但我无法插入此列而不在图表中显示它。

可以在dataTable中添加新列并在工具提示中显示它吗？

Answer 1

您可以使用$start = date_create('2017-03-02 15:00:00'); $end = date_create('2017-03-02 18:15:00'); $diff=date_diff($end,$start); echo $diff->format('%H:%i'); column role

为每个系列构建自定义工具提示

请参阅以下工作代码段

数据视图用于为每个系列添加计算列

计算列用作'tooltip'

要使用html工具提示，该列必须具有 - ＆gt;属性'tooltip'

并且选项必须包含 - ＆gt; 'html: true'

tooltip: {isHtml: true}

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn("date", "Data");
  dataTable.addColumn("number", "T0 (%)");
  dataTable.addColumn("number", "T1 (%)");
  dataTable.addColumn("number", "T2 (%)");
  dataTable.addColumn("number", "T3 (%)");
  dataTable.addColumn("number", "OEE (%)");
  dataTable.addColumn("number", "OEE Médio");

  dataTable.addRows([
    [new Date(2017, 04, 02, 13, 01, 25, 00), 100, 100, 38.6, 100, 38.6, 89],
    [new Date(2017, 04, 02, 13, 32, 33, 00), 97, 92, 55.6, 100, 46.6, 89],
    [new Date(2017, 04, 02, 14, 00, 01, 00), 75, 89, 45.8, 88, 55.5, 89],
    [new Date(2017, 04, 02, 14, 35, 07, 00), 68, 75, 57.9, 99, 33.1, 89]
  ]);

  var date_formatter = new google.visualization.DateFormat({
    pattern: "dd/MM/yyyy HH:mm:ss"
  });
  date_formatter.format(dataTable, 0);

  // create view with tooltip columns for each series
  var viewColumns = [0];
  var dataView = new google.visualization.DataView(dataTable);
  $.each(new Array(dataTable.getNumberOfColumns()), function (index) {
    // ignore x-axis column
    if (index === 0) {
      return;
    }

    // add series column
    viewColumns.push(index);

    // add tooltip column - column role should directly follow the series it represents
    viewColumns.push({
      calc: function (dt, row) {
        // build tooltip
        var tooltip = '<div class="ggl-tooltip"><div><span>';
        tooltip += dt.getFormattedValue(row, 0) + '</span></div>';
        tooltip += '<div>' + dt.getColumnLabel(index) + ':&nbsp;';
        tooltip += '<span>' + dt.getFormattedValue(row, index) + '</span></div>';
        tooltip += '<div>Add whatever you want for column: ' + index + ', row: ' + row + '</div></div>';

        return tooltip;
      },
      p: {html: true},
      role: 'tooltip',
      type: 'string'
    });
  });
  dataView.setColumns(viewColumns);

  var options = {
    hAxis: {
      title: 'Linha do tempo'
    },
    vAxis: {
      title: '(%)',
      viewWindow: {
        min:0,
        max: 120
      }
    },
    explorer: {
      axis: 'horizontal',
      keepInBounds: true,
      maxZoomIn: 0.05
    },
    legend: { position: 'top' },
    colors: ['#772583', '#e05206', '#d28ac8', '#ecc200', '#69be28', '#0073cf'],
    pointSize: 4,
    tooltip: {isHtml: true}
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(dataView.toDataTable(), options);
}

.ggl-tooltip {
  border: 1px solid #E0E0E0;
  font-size: 10pt;
  padding: 8px 8px 8px 8px;
}

.ggl-tooltip div {
  margin-top: 4px;
}

.ggl-tooltip span {
  font-weight: bold;
}

注意：使用数据视图绘制时，图表无法识别<script src="https://www.gstatic.com/charts/loader.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div id="chart_div"></div>的列属性

所以数据视图在绘制时会转换回数据表 ...

'html': true

Google可视化 - 自定义工具提示点

1 个答案: