【问题标题】:Fusioncharts XT Hovereffect only works on the half chartFusioncharts XT 悬停效果仅适用于半图
【发布时间】:2015-07-16 08:37:36
【问题描述】:

我有一个多系列图表,它只在图表的左侧显示动画。 showTooltip 效果很好,只要它在左侧,但是当您移动到右侧的锚点时,它就不起作用了。

有人知道这个错误吗?

【问题讨论】:

    标签: xml json charts hover fusioncharts


    【解决方案1】:

    JSFiddle:

    FusionCharts.ready(function () {
        var visitChart = new FusionCharts({
            type: 'line',
            renderAt: 'chart-container',
            width: '500',
            height: '300',
            dataFormat: 'json',
            dataSource: {
                "chart": {
                    "caption": "Visitors to website",
                    "subCaption": "Last week",
                    "xAxisName": "Day",
                    "yAxisName": "Visits",
                    "theme": "fint",
                    //Additional anchor hover cosmetics attributes
                    "anchorBgHoverColor": "#96d7fa",                
                    "anchorBorderHoverThickness" : "4",
                    "anchorHoverRadius":"7"               
                },
                "data": [{
                    "label": "Mon",
                    "value": "5123"
                }, {
                    "label": "Tue",
                    "value": "4233"
                }, {
                    "label": "Wed",
                    "value": "5507"
                }, {
                    "label": "Thu",
                    "value": "4110"
                }, {
                    "label": "Fri",
                    "value": "5529"
                }, {
                    "label": "Sat",
                    "value": "5803"
                }, {
                    "label": "Sun",
                    "value": "6202"
                }]
            }
        }).render();
    });
    <script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
    <script src="https://static.fusioncharts.com/code/latest/fusioncharts.theme.fint.js"></script>
    <div id="chart-container">FusionCharts will render here</div>
    
    <!-- Using Hover effect on anchors for line charts. Roll over the anchors to see the effect.  
    
    Attributes : 
        # plotHoverEffect - Set to 1
        //Following attributes helps to configure the anchor cosmetics on hover
    
        # anchorBgHoverColor - Background color of anchor upon hover
        # anchorBorderHoverColor - Border color of anchor upon hover (Not used in this sample) 
        # anchorBorderHoverThickness - Border thickness of anchor upon hover
        # anchorHoverRadius - Radius of anchor upon hover
    -->

    http://jsfiddle.net/fusioncharts/BQUw4/

    悬停效果在画布区域的左右两侧都可见。在此处共享数据以复制问题。

    【讨论】:

    • 遗憾的是,当我在 JSFiddle 中使用它时,该代码可以工作。我认为代码的另一部分存在问题。我想,也许有人已经出现了类似的错误。
    【解决方案2】:

    我在 Fiddle 中尝试了上面给出的代码,即使我在 Fiddle 之外尝试它也可以正常工作。

    FusionCharts.ready(function() {
                var visitChart = new FusionCharts({
                    type: 'line',
                    renderAt: 'chart-container',
                    width: '500',
                    height: '300',
                    dataFormat: 'json',
                    dataSource: {
                        "chart": {
                            "caption": "Visitors to website",
                            "subCaption": "Last week",
                            "xAxisName": "Day",
                            "yAxisName": "Visits",
                            "theme": "fint",
                            "anchorBgHoverColor": "#96d7fa",
                            "anchorBorderHoverThickness": "4",
                            "anchorHoverRadius": "7"
                        },
                        "data": [{
                            "label": "Mon",
                            "value": "5123"
                        }, {
                            "label": "Tue",
                            "value": "4233"
                        }, {
                            "label": "Wed",
                            "value": "5507"
                        }, {
                            "label": "Thu",
                            "value": "4110"
                        }, {
                            "label": "Fri",
                            "value": "5529"
                        }, {
                            "label": "Sat",
                            "value": "5803"
                        }, {
                            "label": "Sun",
                            "value": "6202"
                        }]
                    }
                }).render();
            });
    

    您甚至可以在FusionCharts 中尝试不同类型的折线图。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-09-10
      • 1970-01-01
      • 2016-10-05
      • 1970-01-01
      • 2015-09-10
      • 2021-03-13
      • 2013-09-04
      • 1970-01-01
      相关资源
      最近更新 更多