隐藏amCharts中balloonText旁边显示的值

时间:2017-08-24 12:55:56

标签: javascript html css amcharts

我将首先向您展示我的问题:

当我将鼠标放在我实时的任何一点amChart上时,如图所示,不仅会显示balloonText,还会显示其标签旁边的x轴值! 但我不希望数字显示在那里。 我该如何解决这个问题?

这是我的代码:

                    "graphs": [{
                        "id": "g1",
                        "balloonText": "<img src='javascripts/images/info.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[value]]</b></span><img src='javascripts/images/time.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[category]]</b></span>",
                        "lineColor": colors[c++],
                        "lineThickness": 1.5,
                        "negativeLineColor": "#637bb6",
                        "type": "smoothedLine",
                        "valueField": "value",
                        "title": Ctitle[num] + "_a"
                    }, {
                        "id": "g2",
                        "balloonText": "<img src='javascripts/images/info.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[value]]</b></span><img src='javascripts/images/time.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[category]]</b></span>",
                        "lineColor": colors[c++],
                        "lineThickness": 1.5,
                        "negativeLineColor": "#637bb6",
                        "type": "smoothedLine",
                        "valueField": "value2",
                        "title": Ctitle[num] + "_b"
                    }, {
                        "id": "g3",
                        "balloonText": "<img src='javascripts/images/info.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[value]]</b></span><img src='javascripts/images/time.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[category]]" + new Date().toJSON().slice(0, 10).replace(/-/g, '/') + "</b></span>",
                        "lineColor": colors[c++],
                        "lineThickness": 1.5,
                        "negativeLineColor": "#637bb6",
                        "type": "smoothedLine",
                        "valueField": "value3",
                        "title": Ctitle[num] + "_c"
                    }],

                    "legend": {
                        "position": "right",
                        "marginLeft": 20,
                        "autoMargins": false,
                        "marginBottom": 40,
                    },

                })

提前谢谢。

1 个答案:

答案 0 :(得分:0)

要在鼠标悬停时隐藏图例中的值,请将图例的valueText属性设置为空字符串:

legend: {
  // ...
  valueText: ""
}

演示如下:

&#13;
&#13;
var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "legend": {
    "valueText": ""
  },
  "dataProvider": [{
    "date": "2017-06-23",
    "value": 4
  }, {
    "date": "2017-06-24",
    "value": 12
  }, {
    "date": "2017-06-25",
    "value": 7
  }, {
    "date": "2017-06-26",
    "value": 13
  }, {
    "date": "2017-06-27",
    "value": 2
  }, {
    "date": "2017-06-28",
    "value": 14
  }, {
    "date": "2017-06-29",
    "value": 12
  }, {
    "date": "2017-06-30",
    "value": 9
  }, {
    "date": "2017-07-01",
    "value": 16
  }, {
    "date": "2017-07-02",
    "value": 1
  }, {
    "date": "2017-07-03",
    "value": 9
  }, {
    "date": "2017-07-04",
    "value": 10
  }, {
    "date": "2017-07-05",
    "value": 16
  }, {
    "date": "2017-07-06",
    "value": 10
  }, {
    "date": "2017-07-07",
    "value": 8
  }, {
    "date": "2017-07-08",
    "value": 17
  }, {
    "date": "2017-07-09",
    "value": 15
  }, {
    "date": "2017-07-10",
    "value": 9
  }, {
    "date": "2017-07-11",
    "value": 16
  }, {
    "date": "2017-07-12",
    "value": 4
  }],
  "graphs": [{
    "valueField": "value",
    "title": "graph",
    "bullet": "round"
  }],
  "chartCursor": {},
  "categoryField": "date",
  "dataDateFormat": "YYYY-MM-DD",
  "categoryAxis": {
    "parseDates": true
  }
})
&#13;
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 200px"></div>
&#13;
&#13;
&#13;