如何在amchart中显示特定图例的值?

时间:2017-05-27 11:31:10

标签: javascript jquery amcharts

enter image description here我构建了一个图表,其中我正在显示图例。最初,我们总结了值并在图例中显示。但是我需要显示N / A'对于特定的图例。如果我鼠标悬停在图表上,我们应该显示该值。下面我附上了我已经完成的代码。

'legend': {
          'markerType': 'circle',
          'periodValueText': 'total: [[value.sum]]',
          'labelText': '[[title]] :',
          'valueText': '[[value]]',
          'valueWidth': 80,
          'valueFunction': function(legendData, valueText) {
                        var id = (typeof legendData.id !== 'undefined') ? legendData.id : legendData.graph.id;

                        if (id === 'D1' || id === 'D2') {

                            return valueText === '0' ? 'N/A' : valueText ;
                        }

                        return valueText;
                    }
                },

如果值为0,我使用了一个值函数来显示N / A.但最初我应该为id D1和D2显示N / A.

1 个答案:

答案 0 :(得分:1)

您应该使用legendData属性中的values属性,使您的逻辑基于何时在悬停时显示N / A或何时在鼠标离开图表时显示N / A.这将使检测显示的值更容易管理。

在这里'如何默认" N / A"鼠标输出时D1和D2以及初始加载时没有鼠标光标:

  legend: {
    // ...
    valueFunction: function(legendData, valueText) {
      //values is available on mouseover
      if (legendData.values) {
        var id = legendData.graph.id;

        if (id === "D1" || id === "D2") {
          return valueText === "0" ? "N/A" : valueText;
        }
      }
      //initial value when no mouse cursor is present or on mouseout
      else if (legendData.id === "D1" || legendData.id === "D2") { 
        return "N/A";
      }

      return valueText;
    }
  },

Demo