amCharts Balloon:有没有办法将所有数据整合到一个气球中?

时间:2015-09-01 12:33:27

标签: html charts amcharts

编辑:我使用的是JavaScript股票图表的v2

我还有另一个关于amCharts的问题。我正在尝试将所有数据合并到一个气球中。我知道这个指南:

http://www.amcharts.com/tutorials/showing-only-one-balloon-for-all-graphs/

......但它对我不起作用。我的代码似乎只允许一个HTML <br>

一旦我将更多这些内容添加到我的代码中,就像这样:

graph.balloonText = “graph1:[[value1]]<br>graph2:[[value2]]<br>graph3:[[value3]]”; 

它看起来像这样:IMAGE HERE

这不是我明显想要的。我的最终目标是只拥有一个气球。

graph = new AmCharts.AmGraph();
graph.valueAxis = valueAxis3;
graph.balloonText = "graph1:[[pages]]<br>graph2:[[ctr]]<br>graph3:[[impressions]]";
//graph.balloonText = "Click Through Rate: [[ctr]]%";
graph.title = "CTR";
graph.valueField = "ctr";
graph.type = "line";
graph.lineAlpha = 1;
graph.lineThickness = 2;
graph.lineColor = "#fabf3a";
graph.fillAlphas = 0;
graph.hidden = false;
chart.addGraph(graph);

请帮帮我

1 个答案:

答案 0 :(得分:0)

经过一些研究后我发现它是如何工作的。 AmCharts本身并不提供此功能。我必须为它编写自己的JS代码。

chart.addListener("init", function () {
  function formatGraph(url, data) {
    return "<p style='text-align: left;'>" +
           "<img src='" + url + "' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'>" +
           "<span style='font-size:14px; color:#000000;'>" +
           "<b>" + data + "</b>" +
           "</span>" +
           "</p>"
  }

  function balloonFunction(info) {
    var data = info.dataContext;
    var graphs = chart.graphs;

    return (graphs[0].hidden
             ? ""
             : formatGraph("http://www.amcharts.com/lib/3/images/car.png", data.cars)) +
           (graphs[1].hidden
             ? ""
             : formatGraph("http://www.amcharts.com/lib/3/images/motorcycle.png", data.motorcycles)) +
           (graphs[2].hidden
             ? ""
             : formatGraph("http://www.amcharts.com/lib/3/images/bicycle.png", data.bicycles));
  }

  function showBalloon() {
    var seen = false;
    var graphs = chart.graphs;

    for (var i = 0; i < graphs.length; ++i) {
      var graph = graphs[i];

      graph.balloonFunction = balloonFunction;

      if (!graph.hidden && !seen) {
        seen = true;
        delete graph.balloonText;

      } else {
        graph.balloonText = "";
      }
    }

    chart.validateNow();
  }

  showBalloon();

  chart.legend.addListener("hideItem", function () {
    showBalloon();
  });

  chart.legend.addListener("showItem", function () {
    showBalloon();
  });