如何將 x 軸值設置為浮圖文本數據中的工具提示

Question

我嘗試在 Flot char 中使用以下代碼繪制圖表。 圖表按預期繪制，但不是工具提示

 $(function() { var data = [ ["Aug 06", 2], ["Aug 07", 1], ["Aug 08", 1.5], ["Aug 09", 0], ["Aug 10", 0], ["Aug 11", 0], ["Aug 12", 0] ]; var options = { series: { lines: { show: true, lineWidth: 1, fill: true, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.2 }] } }, points: { show: true, lineWidth: 2 }, shadowSize: 0 }, grid: { hoverable: true, clickable: true, tickColor: "#eeeeee", borderWidth: 0, hoverable: true, clickable: true }, tooltip: true, tooltipOpts: { content: "Your sales for <b>%x</b> was <span>$%y</span>", defaultTheme: false }, xaxis: { mode: "categories", tickLength: 0 }, yaxis: { min: 0 }, selection: { mode: "x" } }; $.plot("#section-chart", [data], options); // Add the Flot version string to the footer $("#footer").prepend("Flot " + $.plot.version + " &ndash; "); });

 #section-chart { width: 600px; height: 300px; }

 <link href="http://www.flotcharts.org/flot/examples/examples.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.9.0/jquery.flot.tooltip.min.js" integrity="sha512-oQJB9y5mlxC4Qp62hdJi/J1NzqiGlpprSfkxVNeosn23mVn5JA4Yn+6f26wWOWCDbV9CxgJzFfVv9DNLPmhxQg==" crossorigin="anonymous"></script> <div id="section-chart" class="demo-placeholder"></div>

將值懸停時，工具提示顯示“您的%x銷售額為 2 美元”，而應顯示Your sales for Aug 06 was $2這里我應該如何將 x 軸值作為浮圖圖表中的工具提示傳遞？ 我在這方面做錯了什么。 友善的建議 ？

Answer 1

解決問題的最簡單方法是用回調替換content字符串：

tooltipOpts : {
        content : getTooltip,
        defaultTheme : false
      },

我定義了getTooltip來獲得你想要的輸出：

function getTooltip(label, x, y) {
    return "Your sales for " + x + " was $" + y; 
}

它有效，正如您在更新的 jsFiddle 中看到的那樣，但您可能需要在評論中考慮船長的建議，並查看最適合您的情況。

Answer 2

解決方案是使用帶有回調函數的tooltipOpts -> content方法將動態數據正確返回到標簽。

我發現將第四個參數傳遞給“tooltipOpts”的回調函數實際上為您提供了構建圖表/圖形的整個數據對象。 從這里，您可以輕松地提取 X 軸標簽，使用該函數的第二個參數作為要提取的標簽索引。

例子：

我傳遞給 plot 函數的數據對象：

[
    {
        data: [[1,47478],[2,24500],[3,40177],[4,10512],[5,10512],[6,10512],[7,43439]],
        points: { show: true, radius: 3},
        splines: { show: true, tension: 0.45, lineWidth: 0, fill: 0.4}
    }
],
{
    colors: ['#0cc2aa'],
    series: { shadowSize: 3 },
    xaxis: {
        show: true,
        font: { color: '#ccc' },
        position: 'bottom',
        ticks: [[1,'Thursday'],[2,'Friday'],[3,'Saturday'],[4,'Sunday'],[5,'Monday'],[6,'Tuesday'],[7,'Wednesday']],
    },
    yaxis:{ show: true, font: { color: '#ccc' }, min:1},
    grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' },
    tooltip: true,
    tooltipOpts: {
        content: function(data, x, y, dataObject) {
            var XdataIndex = dataObject.dataIndex;
            var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
            return y + ' impressions for all of your posts on ' + XdataLabel;
        },
        defaultTheme: false,
        shifts: { x: 0, y: -40 }
    }
}

從上述數據對象呈現的圖表：

正如您在圖像預覽中看到的，用於從實際數據動態呈現標簽內容的邏輯是這樣的：

tooltipOpts: {
    content: function(data, x, y, dataObject) {
        var XdataIndex = dataObject.dataIndex;
        var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
        return y + ' impressions for all of your posts on ' + XdataLabel;
    },
    defaultTheme: false,
    shifts: { x: 0, y: -40 }
}