Highcharts（分散）工具提示不工作 [英] Highcharts (scatter) tooltip notworking

问题描述

 图表：{
 renderTo：'图表选择'，
 backgroundColor：null，
类型：'scatter'
}， 
 title：{
 text：txt +'（'+ title +'）'
}，
 plotOptions：{
 tooltip：{
 crosshairs： true，
 headerFormat：'< b> {point.x}< / b>'，
 pointFormat：'< b> Volumn：{point.y}< / b><价格：{point.price}< br />更改：{point.change}'
} 
}，
 xAxis：{
 type：'日期时间'
}，
 yAxis：{
 title：{
 text：title 
}，
 height：200，
 lineWidth：2 
}，
 series： [{
 color：'rgba（100，100，200，.5）'，
 data：datax 
}] 
  

$ b $ data x = [{x：1381942800000，y：23.000，price：26.00，change：0.00}，{x：1382029200000，y：45.000，price：23.000，change： 0.00}];

此代码不显示工具提示

 工具提示：{b $ b crosshairs：true，
 headerFormat：'< b> {point.x}< / b>'，
 pointFormat：'< b> Volumn：{point.y }< / b>< br />价格：{point.price}< br />更改：{poi nt.change}'
} 
  

解决方案

工具提示属性不是直接在plotOptions下面，而是在plotOptions的系列（或分散）子属性内

以下任何更改均应可行

plotOptions.series.tooltip

  plotOptions：{
 series：{
 tooltip：{
 crosshairs：true，
 headerFormat：'< b> {point.x}< / b>'，
 pointFormat：'< br />< b> Volumn：{point.y}< / b> < br />价格：{point.price}< br />更改：{point.change}'
} 
} 
} 
  

plotOptions.scatter.tooltip

  plotOptions：{
 scatter：{
 tooltip：{
 crosshairs：true，
 head erFormat：'< b> {point.x}< / b>'，
 pointFormat：'< br />< b> Volumn：{point.y}< / b><价格：{point.price}< br />更改：{point.change}'
} 
} 
} 
  

系列[i] .tooltip

 系列：[{
 data：datax，
工具提示：{
十字线：true，
 headerFormat：'< b> {point.x}< / b>'，
 pointFormat：'< br />< b> Volumn：{point.y}< / b><价格：{point.price}< br />更改：{point.change}'
} 
}] 
  

@jsFiddle

                        chart: {
                            renderTo: 'chart-selection',
                            backgroundColor: null,
                            type: 'scatter'
                        },
                        title: {
                            text: txt + ' (' + title + ')'
                        },
                        plotOptions: {
                            tooltip: {
                                crosshairs: true,
                                headerFormat: '<b>{point.x}</b>',
                                pointFormat: '<b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
                            }
                        },
                        xAxis: {
                            type: 'datetime'
                        },
                        yAxis: {
                                title: {
                                    text: title
                                },
                                height: 200,
                                lineWidth: 2
                            },
                        series: [{
                                color: 'rgba(100, 100, 200, .5)',
                                data: datax
                            }]

datax = [{x:1381942800000,y:23.000,price:26.00,change:0.00},{x:1382029200000,y:45.000,price:23.000,change:0.00}];

this code not show the tooltip

tooltip: {
                            crosshairs: true, 
                            headerFormat: '<b>{point.x}</b>',
                            pointFormat: '<b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
                        }

解决方案

The tooltip property is not meant to be directly under plotOptions, but inside the series(or scatter) sub property of the plotOptions

Any of the following changes should work

plotOptions.series.tooltip

plotOptions: {
    series: {
        tooltip: {
            crosshairs: true,
            headerFormat: '<b>{point.x}</b>',
            pointFormat: '<br /><b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
        }
    }
}

plotOptions.scatter.tooltip

plotOptions: {
    scatter: {
        tooltip: {
            crosshairs: true,
            headerFormat: '<b>{point.x}</b>',
            pointFormat: '<br /><b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
        }
    }
}

series[i].tooltip

 series: [{
        data: datax,
        tooltip: {
            crosshairs: true,
            headerFormat: '<b>{point.x}</b>',
            pointFormat: '<br /><b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
        }
    }]

@jsFiddle

这篇关于Highcharts（分散）工具提示不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！