amCharts 工具提示僅顯示在 DateAxis 而不是 ValueAxis

Question

我正在使用 amCharts 並且我正在制作一個具有多個系列的 XY 圖表，當 X 軸類型為DateAxis時工具提示僅顯示，但在ValueAxis時ValueAxis

var dateAxis = chart5.xAxes.push(new am4charts.DateAxis());
series.dataFields.dateX = "time";

帶工具提示的 amChart：

現在，當我將這兩行更改為 Value Axis 時，它不起作用

var dateAxis = chart5.xAxes.push(new am4charts.ValueAxis());
    series.dataFields.valueX = "time";

沒有工具提示的 amChart：

Answer 1

我遇到了同樣的問題，深入研究庫代碼，我意識到 ValueAxis 沒有實現getSeriesDataItem方法（ DateAxis和CategoryAxis ）。 所以，我的解決方案是實現該方法。 基於其他軸實現，我得出的代碼是：

am4charts.ValueAxis.prototype.getSeriesDataItem = function (series, position) {
    var key = this.axisFieldName + this.axisLetter;
    var value = this.positionToValue(position);
    return series.dataItems.getIndex(series.dataItems.findClosestIndex(value, function(x) {
        return x[key];
    }, "any"));
}

添加此原型后，工具提示在使用 ValueAxis 時沒有問題：

 /********** FIX: Add getSeriesDataItem method to ValueAxis ************/ am4charts.ValueAxis.prototype.getSeriesDataItem = function (series, position) { var key = this.axisFieldName + this.axisLetter; var value = this.positionToValue(position); return series.dataItems.getIndex(series.dataItems.findClosestIndex(value, function(x) { return x[key]; }, "any")); } /**********************************************************************/ /* Create chart instance */ var chart = am4core.create("chartdiv", am4charts.XYChart); /* Add data */ chart.data = [{ "xValue": 1000, "yValue": 1587 }, { "xValue": 1100, "yValue": 1567 }, { "xValue": 1250, "yValue": 1617 }, { "xValue": 1400, "yValue": 1630 }, { "xValue": 1700, "yValue": 1660 }, { "xValue": 1754, "yValue": 1683 }, { "xValue": 2255, "yValue": 1691 }, { "xValue": 3004, "yValue": 1298 }]; /* Create axes */ var theXAxis = chart.xAxes.push(new am4charts.ValueAxis()); /* Create value axis */ var theYAxis = chart.yAxes.push(new am4charts.ValueAxis()); /* Create series */ var series1 = chart.series.push(new am4charts.LineSeries()); series1.dataFields.valueY = "yValue"; series1.dataFields.valueX = "xValue"; series1.name = "The X Axis"; series1.bullets.push(new am4charts.CircleBullet()); series1.tooltipText = "{valueY}"; /* Add legend */ chart.legend = new am4charts.Legend(); /* Create a cursor */ chart.cursor = new am4charts.XYCursor();

 body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } #chartdiv { width: 100%; height: 300px; }

 <script src="//www.amcharts.com/lib/4/core.js"></script> <script src="//www.amcharts.com/lib/4/charts.js"></script> <div id="chartdiv"></div>

Answer 2

這是@xorspark 對發布此示例的請求的回復（這也發生在我身上）：

XY 圖表，Y 軸是 ValueAxis，X 軸是 CategoryAxis .... 工具提示有效： https ://codepen.io/alavigne314/pen/JjozVWx

相同的 XY 圖表，但 X 軸從 CategoryAxis 更改為 ValueAxis...並且工具提示消失了： https ://codepen.io/alavigne314/pen/povYBdp

兩者之間的變化只有3行：

var theXAxis = chart.xAxes.push(new am4charts.CategoryAxis());
theXAxis.dataFields.category = "xValue";

更改為

var theXAxis = chart.xAxes.push(new am4charts.ValueAxis());

和

series1.dataFields.categoryX = "xValue";

更改為

series1.dataFields.valueX = "xValue";

也許我們都沒有正確閱讀文檔中的某些內容？ 如果是這樣，我無法找出它是什么。 或者……在 X 和 Y 值軸圖表中工具提示是否已損壞或不受支持？