在上图中我如何删除图例标签或需要在获得0值时显示“无值”

Question

当我获得0值 时，如何删除图例标签或显示“无值”。

由于

Answer 1

您可以在图例中创建valueFunction，以自定义悬停时显示的值。这是一个例子，可以满足您的要求：

  "legend": {
    // ...
    "valueFunction": function(graphDataItem, valueText) {
      if (graphDataItem.values) { 
        if (graphDataItem.values.value === 0) {
          valueText = "no values"
        }
      }
      return valueText;
    }
  },

修改

由于您没有表明您正在使用periodValueText（这就是为什么发布工作小提琴有很多帮助），您仍然可以使用valueFunction检查valueText以查看它是否为＆＃39; s＆＃34; 0 kWH＆＃34;或者你想要替换的任何字符串＆＃34;没有值＆＃34;：

"valueFunction": function(graphDataItem, valueText) {
  if (graphDataItem.values) { 
    if (graphDataItem.values.value === 0 || graphDataItem.values.value === undefined) {
      valueText = "no values"
    }
  }
  else if (valueText === "0 kWH") {
    valueText = "no values";
  }
  return valueText;
}

以下更新的演示：

＆＃13;

＆＃13;

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "legend": {
    "periodValueText": "[[value.sum]] kWH",
    "valueText": "[[value]] kWH",
    "valueFunction": function(graphDataItem, valueText) {
      if (graphDataItem.values) { 
    if (graphDataItem.values.value === 0 || graphDataItem.values.value === undefined) {
          valueText = "no values"
        }
      }
      else if (valueText === "0 kWH") {
        valueText = "no values";
      }
      return valueText;
    },
    "position": "right"
  },
  "chartCursor": {},
  "graphs": [{ 
    "title": "First graph",
    "valueField": "value1"
  },{ 
    "title": "Second graph",
    "valueField": "value2"
  }, {
    "title": "Third graph",
    "valueField": "value3"
  }],
  "categoryField": "category",
  "dataProvider": [
    {
        "category": "cat-1",
        "value2": 5,
        "value1": 0
    },
    {
        "category": "cat-2",
        "value2": 8,
        "value1": 5
    },
    {
        "category": "cat-3",
        "value2": 20,
        "value1": 1
    },
    {
        "category": "cat-4",
        "value2": 20,
        "value1": 8
    },
    {
        "category": "cat-5",
        "value2": 17,
        "value1": 4
    },
    {
        "category": "cat-6",
        "value2": 0,
        "value1": 10
    },
    {
        "category": "cat-7",
        "value2": 11,
        "value1": 6
    },
    {
        "category": "cat-8",
        "value2": 0,
        "value1": 9
    },
    {
        "category": "cat-9",
        "value2": 8,
        "value1": 0
    },
    {
        "category": "cat-10",
        "value2": 15,
        "value1": 7
    }
]
});

＆＃13;

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>

<div id="chartdiv" style="width: 100%; height: 250px;"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用

捕捉添加侦听器

chart.addListener('rendered', function(event) {
  // populate our custom legend when chart renders
  chart.customLegend = document.getElementById('legend');
  for (var i in chart.chartData) {
    var row = chart.chartData[i];
    var color = chart.colors[i];
    var percent = Math.round(row.percents * 100) / 100;
    var value = row.value;
    legend.innerHTML += '<div class="legend-item" id="legend-item-' + i + '" onclick="toggleSlice(' + i + ');" onmouseover="hoverSlice(' + i + ');" onmouseout="blurSlice(' + i + ');" style="color: ' + color + ';"><div class="legend-marker" style="background: ' + color + '"></div>' + row.title + '<div class="legend-value">' + value + ' | ' + percent + '%</div></div>';
  }
});

可在此处找到更多详细信息[http://codepen.io/team/amcharts/pen/26ca99ef667e85949ba80bb02d9391aa]