tooltip onShow 中调用另外一个canvas图表的绘制会出现问题

[huangxiangpopo]

• F2 Version:
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:https://codepen.io/huangxiangpopo/pen/deJdrY

一个柱状图，一个饼图，点击柱状图时，通过onshow来实现饼图的数据变化，饼图绘制出现问题

[simaQ]

我看下哦

[simaQ]

原因是这样的：

chartC = randerChartC(items[0].value);

tooltip 在处理的时候，将数值类型的数据转换为了字符串数据，所以 items[0].value 返回的是 '88'，而饼图对数据的定义是强类型的（即必须是数字必须是数值类型），所以导致绘制出问题，你这样处理下就可以了。

chartC = randerChartC(items[0].value * 1);

---

另外，这处用法要纠正下：

if (chartC) chartC.clear();

你调用 clear 的话，chartC 对象还是会存在的，它创建的 canvas 对象也会存在，它只是清空画布的内容，但是按照你的逻辑，你清空之后又重新创建新的 chart 对象。建议直接使用 chartC.destroy()，直接销毁。

PS: 你写的这个 demo 用 tooltip 的 onShow() 钩子还挺妙的，哈哈。

var data = [
  {
    year: "人品",
    sales: 88
  },
  {
    year: "团队意识",
    sales: 92
  },
  {
    year: "学习能力",
    sales: 78
  },
  {
    year: "执行力",
    sales: 100
  },
  {
    year: "协调能力",
    sales: 82
  }
];
renderChartR();
var chartC = randerChartC(88);
function renderChartR() {
  var chart = new F2.Chart({
    id: "mountNode",
    width: 400,
    height: 200,
    pixelRatio: window.devicePixelRatio
  });

  chart.source(data, {
    sales: {
      nice: true,
      min: 0,
      max: 100
    }
  });
  chart.tooltip({
    triggerOn: ["click"],
    showItemMarker: false,
    onShow: function onShow(ev) {
      var items = ev.items;

      items[0].name = null;
      items[0].name = items[0].title;
      items[0].value = items[0].value;

      chartC = randerChartC(items[0].value * 1);
    }
  });
  chart
    .interval()
    .position("year*sales")
    .style({
      fill: "#3571db"
    });
  chart.render();
}

function randerChartC(num) {
  if (chartC) chartC.destroy();

  if (!num) return;
  var color;
  if (num >= 0 && num < 60) {
    color = "#fd452a";
  } else if (num >= 60 && num < 70) {
    color = "#303030";
  } else if (num >= 70 && num < 90) {
    color = "#357edb";
  } else if (num >= 90 && num <= 100) {
    color = "#02602e";
  }
  var data = [
    {
      x: "1",
      y: num
    }
  ];
  var chart = new F2.Chart({
    id: "jxpf",
    width: 175,
    height: 175,
    pixelRatio: window.devicePixelRatio
  });
  chart.source(data, {
    y: {
      max: 100,
      min: 0
    }
  });
  chart.axis(false);
  chart.tooltip(false);
  chart.coord("polar", {
    transposed: true,
    innerRadius: 0.8,
    radius: 0.85
  });
  chart.guide().arc({
    start: [0, 0],
    end: [1, 99.98],
    top: false,
    style: {
      lineWidth: 15,
      stroke: "#ccc"
    }
  });
  chart.guide().text({
    position: ["50%", "50%"],
    content: num + "分",
    style: {
      fontSize: 20,
      fill: color
    }
  });
  chart
    .interval()
    .position("x*y")
    .size(15)
    .style({
      fill: color
    })
    .animate({
      appear: {
        duration: 1200,
        easing: "cubicIn"
      }
    });
  chart.render();
  return chart;
}

[huangxiangpopo]

非常感谢👍