是否有可能在c3图表上动态更改工具提示?

问题描述 投票:0回答:1

生成c3图表时,您可以定义许多属性,还可以定义工具提示,如下所示:

generateData = () => {
  const x = randomNR(0, 100);
  const y = randomNR(0, 100);
  const together = x + y;

  return {
    data: {
      columns: [
        ['data1', x],
        ['data2', y],
      ],
      type: 'donut',
    },
    tooltip: {
      format: {
        value: function() {
          return `${x} + ${y} = ${together}`
        }
      }
    },
    donut: {
      title: `Tooltip not getting updated`
    }
  }
};

但是,生成图表时,我们只能加载新的数据属性。我想知道是否有可能更新工具提示?这是我的情况(仅用于说明目的):https://plnkr.co/edit/8PrbjVqhS9BBYpSbZmkM?p=preview

如您所见,当数据更新时,工具提示不再表示正确的值。

javascript d3.js charts c3.js
1个回答
0
投票

尝试这样的事情?

function randomNR(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function f() {
  let x;
  let y;
  let together;
  return () => {
    x = randomNR(0, 100);
    y = randomNR(0, 100);
    together = x + y;
    return {
      data: {
        columns: [
          ['data1', x],
          ['data2', y],
        ],
        type: 'donut',
      },
      tooltip: {
        format: {
          value: function() {
            return `${x} + ${y} = ${together}`
          }
        }
      },
      donut: {
        title: `Tooltip not getting updated`
      }
    }
  };
}

const myGen = f();

const chart = c3.generate({
  bindto: '#chart',
  ...myGen()
});

setTimeout(function() {
  // HOW TO UPDATE THE TOOLTIP HERE?
  chart.load(myGen().data);
}, 2500);
© www.soinside.com 2019 - 2024. All rights reserved.