Question

在对stackoverflow进行了详尽的研究之后，我没有找到解决我问题的方法，因此不得不打开一个新线程。我有一个基于highcharts的图表，使用json文件。但是我有3个不同的json文件，我希望通过单击即可更改它。简而言之：当单击按钮“ day”时，我想要该$ getJSON文件“ ./json/historyday.json”。当我单击月份时，我需要$ getJSON文件“ ./json/historymonth.json”。请在下面找到我的代码：

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>



<input type="button" id="hour" value="hour" />
<input type="button" id="day" value="day" />


<div id="container" style="height: 400px; max-width: 900px"></div> 
<script>

// file change with click
var filejson = './json/historyday.json';	

$('#hour').click(function (){
   var filejson = '../json/historyday.json';
});
$('#day').click(function (){
    var filejson = '../json/historymonth.json';
});


$.getJSON(filejson, function (data) {

	var currentValue = (data[data.length - 1][1]);

    Highcharts.stockChart('container', {

        rangeSelector: {
    	  enabled: false
    	},

        title: {
            text: 'AAPL Stock Price'
        },

        yAxis: {
          title: {
            text: 'Exchange rate'
          },
          
          plotLines: [{
                value: currentValue,
                color: 'green',
                dashStyle: 'solid',
                width: 2,
                label: {
                    text: currentValue + 'EUR'
                }
            }]
        },

        series: [{
            name: 'AAPL Stock Price',
            data: data,
            type: 'areaspline',
            threshold: null,
            tooltip: {
                valueDecimals: 2
            },
            fillColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [0, Highcharts.getOptions().colors[0]],
                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                ]
            }
        }]
    });
});
</script>

Answer 1

将代码包装在一个函数中，您可以向其传递要加载的JSON数据的文件名。然后，您可以使用与每个按钮的点击处理程序不同的文件名来调用该函数：

var drawChart = function(filejson) {
  console.log("Get data for ", filejson);
  $.getJSON(filejson, function(data) {
    // ... your code to draw the chart here
  });
}

$('#day').on("click", function() {
  drawChart("./json/historyday.json");
});
$('#month').on("click", function() {
  drawChart("./json/historymonth.json");
});
$('#hour').on("click", function() {
  drawChart("./json/historyhour.json");
});

// Draw one of them by default:
drawChart("./json/historyday.json");

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<input type="button" id="month" value="month" />
<input type="button" id="day" value="day" />
<input type="button" id="hour" value="hour" />

<div id="container" style="height: 400px; max-width: 900px"></div>

您当前在这些点击处理程序中试图做的事情（至少在对问题的最新编辑中）仅更改了filejson变量的内容；不会执行任何可见的操作，因为仍然需要触发ajax调用和实际绘制图表。

Answer 2

var filePath = {“ day”：“ pathTodayJSON”， “ month”：“ pathMonthJson”， “ hour”：“ pathHoutJson”}

然后调用filePath.day，filePath.month，filePath.hour

Answer 3

这将处理请求并使用数据绑定基于单击的按钮更新高位图表。我也已将其上传到jsFiddle，

更新（每个时间间隔自动重新加载）：with-auto-reload-feature-jsFiddle

// Draw Highchart
function drawHighchart(timeFrameUrl) {
    $.ajax({url: timeFrameUrl, success: function(result) {
        $('#container').highcharts({
            xAxis: {
            },
            series: [{
                data: result    
            }]
        });
    }});
}

$(document).ready(function() {
    var selectedTimeFrameUrl = null;

    // Draw default on ready
    selectedTimeFrameUrl = $("#day").data("url");
    drawHighchart(selectedTimeFrameUrl);

    // Draw based on clicked button
    $("#month, #day, #hour").click(function() {
        selectedTimeFrameUrl = $(this).data("url");
        drawHighchart(selectedTimeFrameUrl);
    });

    // Reload selected TimeFrame data every 5 minutes
    setInterval(function() {
        drawHighchart(selectedTimeFrameUrl);
    }, 300000);// 5 minutes === 300000 ms
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>

<button id="month" data-url="https://api.myjson.com/bins/12at1e">Month</button>
<button id="day" data-url="https://api.myjson.com/bins/16cjya">Day</button>
<button id="hour" data-url="https://api.myjson.com/bins/1fecci">Hour</button>
<div id="container"></div>

单击jquery更改变量

3 个答案: