0

我正在尝试创建一个 highstock 图表,其中一些点用圆圈标记。当您将鼠标悬停在图表上时,图表中的所有点都有一个工具提示。

但是,具有标志的点的工具提示应该来自标志。我一直在尝试查看 highstock 是否有一个 API,通过它我可以根据该点是否有标志的条件来判断是否应该显示工具提示。但是,我被困在如何找到一个点是否有标志。

这是我的例子的小提琴:http: //jsfiddle.net/ulhas87/WSDza/

{
    rangeSelector: {
        selected: 1
    },
    title: {
        text: 'USDtoEURexchangerate'
    },
    yAxis: {
        title: {
            text: 'Exchangerate'
        }
    },
    tooltip: {
        formatter: function(){
            console.log(this);
            if(this.point){
                //if this point has a flag then return false 
                //else return the tooltip for this point 
                return this.y;
            }else{
                //this is a flag - hence return the flag tooltip
                return this.y;
            }
        },

    },
    series: [
        {
            name: 'USDtoEUR',
            data: data,
            id: 'dataseries',
            tooltip: {
                valueDecimals: 4
            },
            followPointer: false
        },
        {
            type: 'flags',
            data: [
                {
                    x: Date.UTC(2011,
                    1,
                    14),
                    title: '',
                    text: 'Shape: "circle"'
                },
                {
                    x: Date.UTC(2011,
                    3,
                    28),
                    title: '',
                    text: 'Shape: "circle"'
                }
            ],
            onSeries: 'dataseries',
            shape: 'circle',
            width: 1,
            height: 1,
            y: -4,
            states: {
                hover: {
                    fillColor: '#395C84'//darker
                }
            },
            point: {
                events: {
                    mouseOver: function(){
                        console.log(this);
                    }
                }
            },
            zIndex: 10
        },
        {
            type: 'flags',
            data: [
                {
                    x: Date.UTC(2011,
                    2,
                    10),
                    title: 'C',
                    text: 'Shape: "flag"'
                },
                {
                    x: Date.UTC(2011,
                    3,
                    11),
                    title: 'C',
                    text: 'Shape: "flag"'
                }
            ],
            color: '#5F86B3',
            fillColor: '#5F86B3',
            onSeries: 'dataseries',
            width: 16,
            style: {
                //textstylecolor: 'white'
            },
            states: {
                hover: {
                    fillColor: '#395C84'//darker
                }
            },
            marker: {
                fillColor: '#000000'
            }
        }
    ]
}

感谢任何帮助。谢谢

4

1 回答 1

0

问题是您的樱桃与用于旗帜的樱桃不同。查看更新版本:http: //jsfiddle.net/WSDza/3/

另外,我建议将hideDelay观察者设置得较低,因为该点没有工具提示。

于 2013-07-10T11:14:11.917 回答