AmCharts导出图片时Balloon背景色丢失问题求助

问题描述 #

我尝试将AmChart导出为PNG或JPG格式时遇到一个问题：若在图片下载前将光标悬停在图表上，下载后的图片中会显示Balloon，但Balloon没有背景色，显示效果很差。以下是我的代码：

var chartData = [{ date: '12/5/2018', visits: 100 }, { date: '12/6/2018', visits: 200 }, { date: '12/8/2018', visits: 170 }, { date: '12/10/2018', visits: 320 }]; 
var chart = AmCharts.makeChart("chartdiv", { 
  "theme": "black", 
  "type": "serial", 
  "dataProvider": chartData, 
  "valueAxes": [{ "id": "v1", "axisAlpha": 0.1 }], 
  "graphs": [{ 
    "useNegativeColorIfDown": true, 
    "balloonText": "[[category]]<br><b>value: [[value]]</b>", 
    "bullet": "round", 
    "valueField": "visits" 
  }], 
  "chartCursor": { 
    "valueLineEnabled": true, 
    "valueLineBalloonEnabled": true 
  }, 
  "categoryField": "date", 
  "categoryAxis": { "parseDates": true }, 
  "export": { "enabled": true, "backgroundColor": '#3B3B3C' } 
}); 

解决方案 #

这个问题我之前也碰到过，本质是导出功能捕获图表快照时，Balloon的样式没有被完整渲染出来。给你两个可行的解决思路：

方法1：导出前自动隐藏Balloon

最稳妥的方式是在导出触发前，强制隐藏所有交互产生的Balloon，保证导出的是图表的初始状态。你可以利用AmCharts的exportBeforeCapture事件来实现：

// 图表初始化完成后添加这段监听
chart.addListener("exportBeforeCapture", function() {
  // 隐藏主Balloon
  if (chart.balloon) {
    chart.balloon.hide();
  }
  // 隐藏chartCursor关联的Balloon
  if (chart.chartCursor) {
    chart.chartCursor.hideCursor();
  }
});

这样不管你导出前有没有悬停过图表，都会自动清理掉Balloon状态，导出的图片就不会出现那个无背景的Balloon了。

方法2：给Balloon显式设置背景样式

如果你就是希望导出时保留Balloon的显示，那得手动给Balloon指定背景色，别依赖主题的默认样式（有时候主题样式在导出快照时不会被正确读取）。修改你的图表配置：

var chart = AmCharts.makeChart("chartdiv", {
  // 原有的配置保持不变
  "balloon": {
    "fillColor": "#3B3B3C", // 和你导出的背景色匹配
    "alpha": 0.9,
    "borderColor": "#fff",
    "borderThickness": 1
  },
  "chartCursor": {
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    // 给cursor的Balloon也单独设置样式
    "balloon": {
      "fillColor": "#3B3B3C",
      "alpha": 0.9
    }
  },
  // 原有的配置保持不变
});

这样导出时Balloon就会带有你设置的背景色，不会显得透明突兀。

个人更推荐第一种方法，毕竟导出图表大多是要展示清晰的可视化结果，而不是交互中的临时状态~

内容的提问来源于stack exchange，提问作者user3062437