将滑块添加到折线图融合图答案

【问题标题】：Add slider to line chart fusion chart将滑块添加到折线图融合图
【发布时间】：2015-01-28 16:09:04
【问题描述】：

我正在使用 Fusion Chart 库来构建折线图。我想要图表底部的滑块，这样当滑块来回移动时值可以改变。我们如何在融合图中实现这一点？

【问题讨论】：

看看这个fusioncharts.com/explore/zoom-scroll-charts
$(function() { $( "#slider" ).slider({ range: "min", value: 45, min: 1, max: 90, slide: function( event, ui ) { //$( "#amount" ).val( ui.value ); reloadChart(ui.value); } }); $( "#amount" ).val( $( "#slider" ).slider( “价值”) ); });

标签： slider jquery-ui-slider fusioncharts

【解决方案1】：

您是否正在寻找这样的解决方案？ http://jsfiddle.net/subramaniashiva/anrsydf7/

我已经使用了 FusionCharts 的 getJSONData 和 setJSONData 并根据滑块的值更新了折线图。

FusionCharts.ready(function() {
var chartConfig = {
        "caption": "Total footfall in Bakersfield Central - Admin View",
        "subCaption": "Year 2014",
        "xAxisName": "Month",
        "yAxisName": "No. of Visitors",

        //Cosmetics
        "lineThickness": "2",
        "paletteColors": "#0075c2",
        "baseFontColor": "#333333",
        "baseFont": "Helvetica Neue,Arial",
        "captionFontSize": "14",
        "subcaptionFontSize": "14",
        "subcaptionFontBold": "0",
        "showBorder": "0",
        "bgColor": "#ffffff",
        "showShadow": "0",
        "canvasBgColor": "#ffffff",
        "canvasBorderAlpha": "0",
        "divlineAlpha": "100",
        "divlineColor": "#999999",
        "divlineThickness": "1",
        "divLineIsDashed": "1",
        "divLineDashLen": "1",
        "divLineGapLen": "1",
        "showXAxisLine": "1",
        "xAxisLineThickness": "1",
        "xAxisLineColor": "#999999",
        "showAlternateHGridColor": "0",
        "yAxisMinValue": "0",
        "yAxisMaxValue": "100",
        "animation": "0"
    },
    chartData = [{
        "label": "Jan",
        "value": "42"
    }, {
        "label": "Feb",
        "value": "81"
    }, {
        "label": "Mar",
        "value": "36"
    }],
    revenueChart = new FusionCharts({
        type: 'line',
        renderAt: 'chart-container',
        width: '550',
        height: '350',
        dataFormat: 'json',
        dataSource: {
            "chart": chartConfig,
            "data": chartData
        }
    });
revenueChart.render();
document.getElementById('slider').oninput = function() {
    var currentData = revenueChart.getJSONData(),
        selectedMonth = document.getElementById("monthSelector").selectedIndex;
    currentData.data[selectedMonth].value = this.value.toString();
    revenueChart.setJSONData(currentData);
};
});

【讨论】：