javascript - Amchart：多面板水平图表（立体主义图表）没有在工具提示上生成时间作为气球文本

Question

我没有在工具提示上获得 x 轴值（时间）作为鼠标悬停在带有多个面板的 Amchart 水平图表中的气球文本。我需要鼠标悬停在工具提示上的 x 轴时间。请在以下位置找到更多信息：https ://www.amcharts.com/demos/multi-panel-horizo​​n-chart/

function buildPanel(dim) {
    return {       
        "valueAxes": [{
            "axisAlpha": 0,
            "gridAlpha": 0,
            "position": "left",
            "gridCount": 2,
            "labelsEnabled": false,
            "labelFrequency": 1,
            "strictMinMax": true,
            "minimum": 0,
            "maximum": 2
        }, {
            "id": "actual",
            "axisAlpha": 0,
            "gridAlpha": 0,
            "position": "left",
            "gridCount": 2,
            "labelsEnabled": false
        }],       
        "showCategoryAxis": true,
        "stockGraphs": [{
            "id": "pos_band1" + dim,
            "lineAlpha": 0,
            "showBalloon": false,
            "valueField": "pos_1d",
            "fillAlphas": 0,
            "useDataSetColors": false,
            "visibleInLegend": false,
            "balloonText" :"Test Vale" // show Ballon Text
        }, {
            "fillAlphas": 1,
            "lineColor": "#c6dbef",
            "fillToGraph": "pos_band1" + dim,
            "lineAlpha": 0,
            "showBalloon": false,
            "valueField": "pos_1u" + dim,
            "type": "step",
            "theme": "light",
            "useDataSetColors": false,
            "visibleInLegend": false
        }, {
            "id": "pos_band2" + dim,
            "lineAlpha": 0,
            "showBalloon": false,
            "valueField": "pos_2d",
            "fillAlphas": 0,
            "useDataSetColors": false,
            "visibleInLegend": false
        }]
    };
}

谁能帮帮我吗。

Answer 1

在您的特定代码段中，您必须设置showBalloon为 true，但是如果您替换balloonTextto ，您可能会得到原始波段值而不是最终值，[[value]]将显示原始波段值的气球而不是最终值，这可能不是什么你要。另请注意，这[[category]]将为您提供日期/时间。

如果您想修改您链接的演示中的气球，您必须修改balloonText提到的或创建一个如果您想使用最后两个 stockGraphsballoonFunction微调日期格式：AmCharts.formatDate

function buildPanel(dim) {
  return {
    // ..
    stockGraphs: [
      // bands omitted
     {
      "fillAlphas": 0,
      "lineAlpha": 0,
      "lineColor": "#eee",
      "showBalloonAt": "open",
      "balloonFunction": function(graphDataItem) { 
        return graphDataItem.values.value + "<br>" +
          AmCharts.formatDate(graphDataItem.category, "YYYY-MM-DD JJ:NN:SS");
      },
      "valueField": "val" + dim,
      "openField": "mid",
      "type": "smoothedLine",
      "useDataSetColors": false,
      "visibleInLegend": false
    }, {
      "lineAlpha": 1,
      "lineColor": "#2171b5",
      "lineThickness": 2,
      //"showBalloonAt": "open", //remove from actual graph as it does not have an open value
      "balloonFunction": function(graphDataItem) { 
        return graphDataItem.values.value + "<br>" +
          AmCharts.formatDate(graphDataItem.category, "YYYY-MM-DD JJ:NN:SS");
      },
      "valueField": "actual" + dim,
      "type": "smoothedLine",
      "useDataSetColors": false,
      "visibleInLegend": false,
      "valueAxis": "actual"
    } ]
  }
}

这是一个演示