javascript - 从 json 文件加载数据时清除 Highchart 缓存

Question

我正在做以下事情:

1. 使用 python django 中的一些逻辑创建 json 文件
2. 这个 json 文件现在被 High Chart JS 代码用来渲染饼图

highchart js 代码如下:

//Highcharts json饼图

$(document).ready(function() {
console.log("hi from high chart from json PIE")

  $.getJSON("{% static 'money/data/highchartpie.json' %}", function(json) {
    console.log("haha i have read the json")
   $('#containerHighChartJSONPie').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: 1,//null,
        plotShadow: false
    },
    title: {
        text: 'Expenses per Types of Expenditures'
    },
    tooltip: {
        pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Type of Expenditure',
        data: json
    }]
});
});

});

json 中的数据是:[["杂货",50.0],["杂项",30.0]]

问题以下根据需要生成良好的饼图，如果任何数据发生更改，图表也会更改，但有时图表不显示其中更新的数据。我尝试过:

1. 从另一个浏览器运行它 - 它显示带有新值的更新图表
2. 清除缓存并在同一浏览器中重试，现在显示更新的代码

看来是缓存问题，但是有没有办法在 highchart 代码中解决这个问题？

Answer 1

您可以通过调用以下命令将缓存设置为false，它将针对您的所有请求禁用:

$(document).ready(function() {
  $.ajaxSetup({ cache: false });
});

请参阅这个问题:How to set cache false for getJSON in JQuery?

要进行更精确的缓存处理，请将 getJSON 更改为 ajax jquery 调用，其中将 datatype 设置为 JSON:事实上，$.getJSON 是以下内容的快捷方式:

$.ajax({
    dataType: "json",
    url: url,
    data: data,
    success: success
});

因此，如果您想在请求中设置 cache: false，您应该这样添加:

$.ajax({
    cache: false,
    dataType: "json",
    url: url,
    data: data,
    success: success
});