【发布时间】:2015-07-16 08:37:36
【问题描述】:
我有一个多系列图表,它只在图表的左侧显示动画。 showTooltip 效果很好,只要它在左侧,但是当您移动到右侧的锚点时,它就不起作用了。
有人知道这个错误吗?
【问题讨论】:
标签: xml json charts hover fusioncharts
我有一个多系列图表,它只在图表的左侧显示动画。 showTooltip 效果很好,只要它在左侧,但是当您移动到右侧的锚点时,它就不起作用了。
有人知道这个错误吗?
【问题讨论】:
标签: xml json charts hover fusioncharts
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/
悬停效果在画布区域的左右两侧都可见。在此处共享数据以复制问题。
【讨论】:
我在 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 中尝试不同类型的折线图。
【讨论】: