使用 HighCharts 在 Django 中显示数据

Question

我在 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>

和javascriptmain.js文件highchart代码如下

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 中。这种行为的原因可能是什么？

Answer 1

因为数据很可能被视为字符串而不是列表的列表或 JSON 列表，请检查图表函数中的数据集类型，您可以 JSON.parse 加载json 来自字符串

Answer 2

如果可能，您应该将文件中的数据格式从 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/

使用 HighCharts 在 Django 中显示数据

Displaying Data in Django using HighCharts

javascript

python

django

jquery

highcharts