我在 example.txt 檔案中有以下格式的文本資料
[[Date.UTC(1970, 10, 25), 0],
[Date.UTC(1970, 11, 6), 0.25],
[Date.UTC(1970, 11, 20), 1.41],
[Date.UTC(1970, 11, 25), 1.64],
[Date.UTC(1971, 0, 4), 1.6]]
我在 django view.py 檔案中閱讀如下
filepath = os.getcwd()
f = open(filepath "/main/static/main/data/example.txt", "r")
dataset = f.read()
def home(request):
context = {'dataset': dataset}
return render(request, 'main/home.html', context)
將其加載到模板中，如下所示
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id='dataset' data-dataset={{ dataset }} style="width:100%; height:500px;"></div>
<script type="text/javascript" src="{% static 'main/js/main.js' %}" ></script>
和帶有highchart代碼的javascript main.js檔案如下
const app_control = (function() {
var sdata;
var init_charts;
/*
VARIABLES INITIALIZATIONS
*/
/*
DEFINE THE FUNCTIONS
*/
/*
Initialize Functions
*/
init_charts = function(sdata){
const chart = Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Example Data from '
},
xAxis: {
type: "datetime",
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Data in Y Axis'
}
},
colors: ['#06C'],
series: [{
name:'Visualized Data',
data: sdata
}]
})
}
/*
PUBLIC INTERFACE
*/
public_interface = {};
/*
RUN THE FUNCTIONS
*/
$(function(){
sdata = $('#TimeSeries').data('dataset');
init_charts(sdata);
});
return public_interface;
}());
問題是，為什么資料沒有可視化？如果你做 console.log(sdata); 您會看到資料，但它沒有在 HighCharts 中加載。這種行為的原因可能是什么？
uj5u.com熱心網友回復：
如果可能，您應該將檔案中的資料格式從Date.UTC(1970, 10, 25)更改為例如：（25660800000以毫秒為單位的時間戳）。
現場演示：http: //jsfiddle.net/BlackLabel/t2rde3bk/
如果您需要保持當前格式，您可以：
- 使用 eval ->
data: eval(sdata)- 絕對不推薦
現場演示：http: //jsfiddle.net/BlackLabel/z45anjo7/
- 撰寫自定義決議器
const rows = sdata.split('Date.UTC(').slice(1);
const parsedData = [];
rows.forEach(row => {
const splitted = row.split('),');
const date = splitted[0];
const y = splitted[1].split(']')[0];
parsedData.push([
Date.UTC(...date.split(',')),
y
]);
});
const chart = Highcharts.chart('container', {
...,
series: [{
data: parsedData
}]
})
現場演示：http: //jsfiddle.net/BlackLabel/voe4q9bf/
uj5u.com熱心網友回復：
因為很可能資料被視為字串而不是串列串列或 JSON 串列，請檢查圖表函式中資料集的型別，您可以 JSON.parse 從字串加載 json
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/427841.html