Google Charts (ng2-google-charts) - 自定义工具提示 - HTML 被附加到工具提示而不是替换它

Question

我想用我创建的 HTML 替换由谷歌图表生成的默认工具提示。我添加了新列{ type: 'string', role: 'tooltip', p: { html: true } }，我还添加了tooltip: { isHtml: true }, 到文档中建议的图表选项，但是我没有替换默认工具提示，而是将我传递的 html 附加在末尾默认工具提示的结尾。

如何用提供的 HTML 替换整个默认工具提示？

dataTable 对象的前两行：

工具提示：

图表选项：

  options: {
    focusTarget: 'category',
    animation: {
      startup: true,
      easing: 'out',
      duration: 500,
    },
    tooltip: {
      isHtml: true
    },
    height: '250',
    interpolateNulls: true,
    chartArea: {
      width: '90%',
      height: '79%',
    },
    vAxes: {
      0: {
        titlePosition: 'none',
        textStyle: {
          color: '#febd02',
          bold: true,
          fontSize: 13,
        },
        format: '#',
        gridlines: {
          color: '#eaeaea',
          count: '5',
        },
      },
      1: {
        titlePosition: 'none',
        format: '#',
        gridlines: {
          color: 'transparent'
        },
      },
      2: {
        groupWidth: '100%',
        titlePosition: 'none',
        textStyle: {
          color: '#0284ff',
          bold: true,
          fontSize: 13,
        },
        format: 'decimal',
        gridlines: {
          color: 'transparent'
        },
      },
    },
    hAxis: {
      textStyle: {
        color: '#393939',
        bold: true,
        fontSize: 13,
      },
      format: 'MMM d, YYYY',
      gridlines: {
        count: 0,
        color: 'transparent'
      },
      ticks: [],
    },
    series: {
      0: {
        targetAxisIndex: 0,
        type: 'area',
      },
      1: {
        type: 'line'
      },
      2: {
        targetAxisIndex: 2,
        type: 'bars',
        dataOpacity: 0.5,
      },
    },
    colors: [
      '#febd02',
      '#a5a5a5',
      '#0284ff',
    ],
    bar: {
      groupWidth: '35'
    },
    legend: {
      position: 'none'
    },
  },

Answer 1

尝试删除以下选项...

focusTarget: 'category'

上述选项会合并同一 x 轴值上所有系列的工具提示。

因为您只为一个系列 ('Precipitation') 提供自定义工具提示，
前两个系列显示默认工具提示'，
最后一个系列的自定义工具提示添加到末尾。

删除上述选项将允许单独显示每个系列的工具提示。

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function() {
  var data = google.visualization.arrayToDataTable([
    ['Time', 'Maximum Temperature', 'Minimum Temperature', 'Precipitation', {type: 'string', role: 'tooltip', p: {html: true}}],
    [new Date(2020, 7, 26, 14), 19.4, 12, 22, '<div>test</div>']
  ]);

  var options = {
    //focusTarget: 'category',
    animation: {
      startup: true,
      easing: 'out',
      duration: 500,
    },
    tooltip: {
      isHtml: true
    },
    height: '250',
    interpolateNulls: true,
    chartArea: {
      width: '90%',
      height: '79%',
    },
    vAxes: {
      0: {
        titlePosition: 'none',
        textStyle: {
          color: '#febd02',
          bold: true,
          fontSize: 13,
        },
        format: '#',
        gridlines: {
          color: '#eaeaea',
          count: '5',
        },
      },
      1: {
        titlePosition: 'none',
        format: '#',
        gridlines: {
          color: 'transparent'
        },
      },
      2: {
        groupWidth: '100%',
        titlePosition: 'none',
        textStyle: {
          color: '#0284ff',
          bold: true,
          fontSize: 13,
        },
        format: 'decimal',
        gridlines: {
          color: 'transparent'
        },
      },
    },
    hAxis: {
      textStyle: {
        color: '#393939',
        bold: true,
        fontSize: 13,
      },
      format: 'MMM d, YYYY',
      gridlines: {
        count: 0,
        color: 'transparent'
      },
      ticks: [],
    },
    series: {
      0: {
        targetAxisIndex: 0,
        type: 'area',
      },
      1: {
        type: 'line'
      },
      2: {
        targetAxisIndex: 2,
        type: 'bars',
        dataOpacity: 0.5,
      },
    },
    colors: [
      '#febd02',
      '#a5a5a5',
      '#0284ff',
    ],
    bar: {
      groupWidth: '35'
    },
    legend: {
      position: 'none'
    },
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, options);
});

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