Отображение данных в Django с помощью HighCharts

У меня есть текстовые данные в файле 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>

И файл javascript main.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. В чем может быть причина такого поведения?

Потому что, скорее всего, данные обрабатываются как строка, а не как список или JSON список, проверьте типы набора данных в функции charts и вы можете JSON.parse для загрузки json из строки

Если это возможно, вам следует изменить формат данных в вашем файле с Date.UTC(1970, 10, 25) на, например: 25660800000 (метка времени в миллисекундах).

Live demo: http://jsfiddle.net/BlackLabel/t2rde3bk/


Если вам нужно сохранить текущий формат, вы можете:

  • use eval -> data: eval(sdata) - определенно не рекомендуется

Live demo: 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
  }]
})

Live demo: http://jsfiddle.net/BlackLabel/voe4q9bf/

Вернуться на верх