Highcharts（分散）工具提示不工作

本文介绍了Highcharts（分散）工具提示不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

 图表：{
 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}'
} 
}]

                        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（分散）工具提示不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！