图表js工具提示位置在图表上方

Question

有没有一种方法可以将工具提示放置在图表顶部，因此当我在移动设备上显示工具提示时，我的工具提示不会轻易重叠图表。

我正在使用vue图表。

谢谢。

Answer 1

您可以定义自定义定位图。

http://www.chartjs.org/docs/latest/configuration/tooltip.html#position-modes

Answer 2

我有一个类似的问题。

我使用vue。将示例栏导入为图表后，您可以像在chartjs的文档中那样创建自定义位置：

add_filter( 'woocommerce_email_recipient_failed_order', 'wc_failed_order_email_to_customer', 10, 2 );
function wc_failed_order_email_to_customer( $recipient, $order ){
     if( ! is_a( $order, 'WC_Order' ) ) 
         return $recipient;

     if( $billing_email = $order->get_billing_email() ) 
         $recipient = $billing_email;
     return $recipient;
}

例如，这将工具提示的位置设置为事件（鼠标）位置。 渲染图表时，请不要忘记将自定义函数设置为选项：

<script>
import { Bar } from "vue-chartjs";
Chart.Tooltip.positioners.custom = function(elements, eventPosition) { //<-- custom is now the new option for the tooltip position
    /** @type {Chart.Tooltip} */
    var tooltip = this;

    /* ... */

    return {
        x: eventPosition.x,
        y: eventPosition.y
    };
}