javascript - 使用 google 图表和 Laravel 的自定义工具提示

Question

我正在尝试使用 Google 图表和 Laravel 创建自定义工具提示。

    var rdb = new google.visualization.arrayToDataTable([
    ['', 'Contract Cost', 'Deployment Cost', {label: 'T2', role: 'tooltip'}],
    @foreach($rdbs as $rdb)
        @foreach ($rdb as $result)         
        ['{{mb_strimwidth($result->product, 0,50,"...")}}', {{$result->contract_costs}},{{$result->deployment_costs}},'{{$result->product}}'],
        @endforeach   
    @endforeach   

“”的产品名称限制为 50 个，我需要显示的工具提示具有完整的产品名称。知道为什么这段代码不起作用吗？工具提示显示的名称限制为 50 个，而不是全名。

更新:

var full= $( "panel-body" ).width();

    var options = {
        width: full,
        height: rdb.getNumberOfRows()*20,
        bars: 'horizontal', 
    }   

Answer 1

使用自定义工具提示时，
工具提示 Angular 色需要遵循它代表的系列列
每个 y 轴系列应该有自己的工具提示列

您有两个 y 轴系列(“契约(Contract)成本” 和“部署成本”)
但只有一个工具提示列

更正并显示两个工具提示的全名，
在'Contract Cost'之后添加另一个工具提示列

var rdb = new google.visualization.arrayToDataTable([
['', 'Contract Cost', {label: 'T1', role: 'tooltip'}, 'Deployment Cost', {label: 'T2', role: 'tooltip'}],
@foreach($rdbs as $rdb)
    @foreach ($rdb as $result)         
    ['{{mb_strimwidth($result->product, 0,50,"...")}}',{{$result->contract_costs}},'{{$result->product}}',{{$result->deployment_costs}},'{{$result->product}}'],
    @endforeach   
@endforeach   

<小时/>

编辑

column roles ，例如'tooltip'， Material 图表不支持...

参见 --> Tracking Issue for Material Chart Feature Parity
对于不支持的其他几个选项...

Material --> google.charts.Bar -- 包:['bar']

经典 --> google.visualization.BarChart -- 包:['corechart']

注意:有一个选项可以将经典图表样式设置为类似于 Material 图表

theme: 'material'