写博客是一件快乐的事情 。。。

刚同事都下班走了 ,我也准备下班了 , 顺便写一个昨天帮助同事解决的一个JS bug ,

我本身JS 不是很会 ,chart.js 也是第一次了解 。但是这么多年经验了一通百通了 ,然后昨天同事让我帮他解决一个BUG , 是这样的 ,网站上一个统计页面有很多图标 ,有饼状图 有线性图 , 一堆 ,全部都没有百分比显示 ,老板说把那个饼状图 加上百分比文字 ,同事查了下 解决了 ,结果导致 所有地方都加上百分比了 ,但是老板只是要在饼状图加。

在这个方法里面设置 :

Chart.plugins.register(xxxx)

他给我的意思是 ,他查到那个方法是公共方法 。

这一看名字就是个注册 ,全局方法 ,该怎么办呢 ? 我说 我给你下解题思路啊 ,

上策 ,你用的别家的 JS 框架 最好找下他有没有设置的方法 , 如果有那最好了 。

中策: 你这个方法既然是全局方法 ,那肯定那么多图都调用 ,肯定是调用了多次 ,你看下 传进来的参数 ,打印下 看看能不能对应哪个饼状图 ,可以分别处理 。

下策 ,如果实在不能改变他 ,只能说咱们代码里面看怎么处理了 。

然后他说让我帮他处理 。。。 我勒个去 。。 我有时候 ,经常只会说思路 ,原理 ,不帮解决 。。但是 都这样了 。我就帮忙 google 下吧 。

同事给了个这么个参考 可以改的链接 :
https://codepen.io/k3no/pen/WGmVBr/

然后很快找到了 ,核心代码 是 ctx.fillText(dataString + '%', position.x, position.y - (fontSize / 2) - padding);

这一句 ,判断方式很简单了 , 百分号前面加个 ---- 啥的 看看 哪里加会变 。

Chart.plugins.register({
  afterDatasetsDraw: function(chartInstance, easing) {
    // To only draw at the end of animation, check for easing === 1
    var ctx = chartInstance.chart.ctx;
    chartInstance.data.datasets.forEach(function(dataset, i) {
      var meta = chartInstance.getDatasetMeta(i);
      if (!meta.hidden) {
        meta.data.forEach(function(element, index) {
          // Draw the text in black, with the specified font
          ctx.fillStyle = 'grey';
          var fontSize = 16;
          var fontStyle = 'normal';
          var fontFamily = 'Helvetica Neue';
          ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
          // Just naively convert to string for now
          var dataString = dataset.data[index].toString();
          // Make sure alignment settings are correct
          ctx.textAlign = 'center';
          ctx.textBaseline = 'middle';
          var padding = 5;
          var position = element.tooltipPosition();
          ctx.fillText(dataString + '%', position.x, position.y - (fontSize / 2) - padding);
        });
      }
    });

然后果然有参数 感觉很可以 , 快点解决直接 google 吧 , 记住一点 ,你遇到的 别人估计也遇到过 。

google Chart.plugins.register 这句

发现 https://stackoverflow.com/questions/38752248/apply-register-conflicting-plugins-to-different-charts
这个很像 。

全英文是吧 看不懂是不 ,没关系 ,有窍门 ,先别看英文 ,就看里面贴的代码 ,

Chart.plugins.register(plugin1);
window.myBar = new Chart(...);
Chart.plugins.unregister(plugin1);

Chart.plugins.register(plugin2);
window.myBar2 = new Chart(...);
Chart.plugins.unregister(plugin2);

这尼玛 感觉就像是解决这个问题的 。感觉可行 ,恩 再往下看 。

8
down vote
accepted
I think a solution is to assign a specific property in your chart options for each plugin. Each chart will fill a different attribute to use each plugin. In your case, you have plugin1 and plugin2.

Then, in each definition you will check for different attributes to see if that chart is using that plugin or not. For example, your definitions will be something like:

Chart.pluginService.register({
  afterDraw: function(chart) {
    if (chart.config.options.plugin_one_attribute) {
      // Plugin code here...  
    }
  }
});
To use this plugin, your chart will have to fill the plugin_one_attribute, in its options. Like this:

optionsUsingPlugin1 = {
  plugin_one_attribute: // Your variable to be used in the plugin goes here!
  responsive: true,      
  maintainAspectRatio: true,
  title: {
    display: true
  } 
  // And any other config options you are already using
}
And use this when creating your chart:

var myBar = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: optionsUsingPlugin1
});

欸 , 有个option , 找到重点了 ,不是可以设置 。然后设个特殊的属性 ,然后过滤下 不就行了 。恩 就这么办

我同事直接拷贝过来 ,我说 你别拷贝啊 ,你要起个有意义的名字 。 来 写 show_percent_title : true

OK 完美解决。

代码暂时不贴了 ,一大堆 。 媳妇等着一起回家呢 ,走了 。。下班了 。。

今天星期五啊 ,明天不上班 , 啦啦啦
今天星期五啊 ,明天不上班 , 啦啦啦
今天星期五啊 ,明天不上班 , 啦啦啦
今天星期五啊 ,明天不上班 , 啦啦啦
今天星期五啊 ,明天不上班 , 啦啦啦