在使用 双轴多折线条形图 时候 加上 自定义提示 会多出来 逗号

[lcldyh]

在使用 双轴多折线条形图 时候 加上 自定义提示 会多出来 逗号

官方说明：
https://g2.antv.antgroup.com/manual/extra-topics/customization#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8F%90%E7%A4%BAtooltip

以下是问题代码

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

const data = [
  { time: '10:10', call: 4, waiting: 2, people: 2, mock: 3 },
  { time: '10:15', call: 2, waiting: 6, people: 3, mock: 4 },
  { time: '10:20', call: 13, waiting: 2, people: 5, mock: 1 },
  { time: '10:25', call: 9, waiting: 9, people: 1, mock: 2 },
  { time: '10:30', call: 5, waiting: 2, people: 3, mock: 5 },
  { time: '10:35', call: 8, waiting: 2, people: 1, mock: 3 },
  { time: '10:40', call: 13, waiting: 1, people: 2, mock: 2 },
];

chart.data(data);

chart
  .interval()
  .encode('x', 'time')
  .encode('y', 'waiting')
  .encode('color', () => 'waiting')
  .encode('series', () => 'waiting')
  .axis('y', { title: null })
  .scale('y', { nice: true })
  .interaction('tooltip', {
      // render 回调方法返回一个innerHTML 或者 DOM
      render: (event, { title, items }) => `<div>
      <h3 style="padding:0;margin:0">${title}</h3>
      <ul>${items.map(
        (d) =>
          `<li><span style="color: ${d.color}">${d.name}</span> ${d.value}</li>`,
      )}</ul>
      </div>`,
    });

chart
  .interval()
  .encode('x', 'time')
  .encode('y', 'people')
  .encode('color', () => 'people')
  .encode('series', () => 'people')
  .scale('y', { key: '2' })
  .axis('y', { position: 'right', grid: null, title: null });

chart
  .line()
  .encode('x', 'time')
  .encode('y', 'call')
  .encode('color', () => 'call')
  .scale('series', { independent: true });

chart
  .line()
  .encode('x', 'time')
  .encode('y', 'mock')
  .encode('color', () => 'mock')
  .scale('y', { key: '2' })
  .scale('series', { independent: true });

chart.render();

解决办法

  .interaction('tooltip', {
      // render 回调方法返回一个innerHTML 或者 DOM
      render: (event, { title, items }) => `<div>
      <h3 style="padding:0;margin:0">${title}</h3>
      <ul>${items.map(
        (d) =>
          `<li><span style="color: ${d.color}">${d.name}</span> ${d.value}</li>`,
      ).join('')}</ul>
      </div>`,
    });

[pearmini]

正确的写法应该是：

`<div>
  <h3 style="padding:0;margin:0">${title}</h3>
  <ul>${items
    .map(
      (d) =>
        `<li><span style="color: ${d.color}">${d.name}</span> ${d.value}</li>`,
    )
    .join('') // 这一行
  }
  </ul>
</div>`;

可以在控制台看一看 [1, 2, 3] + "" 这行代码的运行结果。