将滑块添加到折线图融合图中

Question

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

Answer 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);
};
});