我正在使用Fusion-chart库，
我有一种情况，我希望在点击（任何栏/区域）类别时将页面滚动到特定div。
这意味着我在图表中有7个多系列类别（每个类别中有5个条形图），每个类别有7个单独的图表，我想在点击该类别区域/栏时将页面滚动到特定的类别图表。
我该如何实现？
我可以在以下节点中处理吗？
"categories": [
{
"category": [
{"label": "G Outlooks","link": "JavaScript:funname('go')"},
{"label": "Instruments","link": "JavaScript:funname('mi')"},
{"label": "G Services","link": "JavaScript:funname('gs')"},
{"label": "S Services","link": "JavaScript:funname('ss')"},
{"label": "P Programs","link": "JavaScript:funname('pp')"},
{"label": "Resources Availability","link": "JavaScript:funname('rac')"},
{"label": "Resources Functionality","link": "JavaScript:funname('raf')"}
]
}
],
"dataset": [
{
"seriesname": "first",
"data": [{"value":168},{"value":134},{"value":119},{"value":64},{"value":82},{"value":32},{"value":18}]
},
{
"seriesname": "second",
"data": [{"value":38},{"value":39},{"value":38},{"value":31},{"value":53},{"value":73},{"value":55}]
},
{
"seriesname": "third",
"data": [{"value":19},{"value":38},{"value":50},{"value":67},{"value":62},{"value":109},{"value":79}]
},
{
"seriesname": "fourth",
"data": [{"value":5},{"value":13},{"value":23},{"value":33},{"value":20},{"value":84},{"value":94}]
},
{
"seriesname": "fifth",
"data": [{"value":4},{"value":10},{"value":4},{"value":39},{"value":17},{"value":39},{"value":75}]
}
]
更新
我在类别对象中使用了 link 属性，但它只在类别名称上添加了链接。
答案 0 :(得分：1)
这应该对你有所帮助！
我已经为Javascript调用创建了每个数据条目的链接，然后使用某些东西将页面滚动到较低的内容！你可以使用
window.scrollTo()
或者如果您使用jQuery，则可以使用animate方法
function goto(link){
window.scrollTo(0, document.querySelector('.' + link ).offsetTop );
}
FusionCharts.ready(function () {
var topStores = new FusionCharts({
type: 'bar2d',
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Top 5 Stores by Sales",
"subCaption": "Last month",
"yAxisName": "Sales (In USD)",
"numberPrefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"showBorder": "0",
"showCanvasBorder": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placeValuesInside": "1",
"valueFontColor": "#ffffff",
"showAxisLines": "1",
"axisLineAlpha": "25",
"divLineAlpha": "10",
"alignCaptionWithCanvas": "0",
"showAlternateVGridColor": "0",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"data": [
{
"label": "Bakersfield Central",
"link": "JavaScript:goto('p1')",
"value": "880000"
},
{
"label": "Garden Groove harbour",
"link": "JavaScript:goto('p2')",
"value": "730000"
},
{
"label": "Los Angeles Topanga",
"link": "JavaScript:goto('p3')",
"value": "590000"
},
],
}
}).render();
});<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<div id="chart-container">FusionCharts will render here</div>
<p class="p0">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it <b>1</b>?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
<p class="p1">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it <b>1</b>?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
<p class="p2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it <b>2</b>?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
<p class="p3">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it <b>3</b>?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>