jqPlot: определить параметры диаграммы из json - PullRequest
Новая
       10

jqPlot: определить параметры диаграммы из json

0 голосов
/ 08 февраля 2012

Я пытаюсь выяснить, возможно ли настроить диаграмму из файла json и как это сделать.

Давайте напишем предложение в другом варианте: могу ли я использовать файл json для передачи jqPlot как данных графика, так и параметров диаграммы?

До сих пор я просто использовал файл json для хранения данных.

Какой совет?

Заранее спасибо, Evan

Ответы [ 2 ]

0 голосов
/ 03 июня 2014

Я не знаю об остальных вас, но мне не понравился ответ здесь, и я был полон решимости сделать эту работу. Наконец-то я добился успеха, и он без проблем работает с такими вещами, как $ .jqplot.DateAxisRenderer.

В моем случае я фактически передаю данные из приложения CherryPy, и мне нужно было иметь возможность передавать параметры в виде JSON вместе с данными для диаграммы. В итоге я просто передал все параметры, заданные в виде строки, а затем использовал EVAL, чтобы превратить его обратно в код JavaScript. Как только я понял синтаксис, он на самом деле работает отлично. Вот лучший способ заставить его работать.

1) Определите все ваши варианты без использования JSON, чтобы убедиться, что график действительно работает правильно.
2) Скопируйте аргумент опций для дословно jqPlot.
3) Обязательно добавьте скобки вокруг параметров, чтобы EVAL правильно их оценил, иначе вы получите синтаксическую ошибку.
4) Включите все это в объект строкового типа на стороне сервера.
5) Затем он пройдет через JSON.dumps, поскольку он возвращается клиенту вместе с остальными вашими данными.
6) На клиентском javascript просто сделайте EVAL для объекта, который был возвращен, и установите результат в качестве аргумента параметров.

Вот пример:
Как вы можете видеть здесь, я также звоню в средство визуализации данных в опциях. Пока параметры вызываются в соответствующем контексте на клиенте, он будет правильно оценивать все переменные и т. Д. И работает отлично. Это работает в jQuery 1.11.0 с jqPlot 1.0.8r1250.

Объект сервера: 

options = """({
        dataRenderer: ajaxDataRenderer,
        dataRendererOptions: {
            name: name
        },
        axes:{
            xaxis:{
                label:xLabel,
                renderer:$.jqplot.DateAxisRenderer,
                tickOptions:{formatString:'%R'}
            },
            yaxis:{
                tickOptions:{
                    formatString:'%.0f'
                }
            }
        },
        legend: {
            show: true,
            placement: 'outsideGrid',
            labels: seriesLabels,
            location: 'ne',
            rowSpacing: '0px'
        },
        highlighter: {
            show: true,
            sizeAdjust: 7.5
        },
        cursor: {
            show: true,
            zoom:true
        }
    })"""

Возврат к клиенту: 

output = json.dumps({
                     'name': name,
                     'xLabel': header[0],
                     'seriesLabels': header[1:],
                     'parms': parms,
                     'options': options,
                     'parmData': parmData,
                     'successful': True
                     })

Javascript: 

var options = eval(incomingData.options);
var plot = $.jqplot('chart_'+name, "/getChartData", options);
0 голосов
/ 09 февраля 2012

Вы можете, вот пример использования вызова AJAX: 

$.ajax({
  url: 'input.json',
  dataType: 'json',
  success: function(options) 
    {                                   
        var data = [
        [3, 7, 9, 1, 4, 6, 8, 2, 5],
        [4, 8, 10, 2, 5, 7, 9, 3, 6],
        [5, 9, 11, 3, 6, 8, 10, 4, 7],
        [6, 10, 12, 4, 7, 9, 11, 5, 8],
        [7, 11, 13, 5, 8, 10, 12, 6, 9]];

        var plot = $.jqplot('chart', data, options);                
    },
  error: function(jqXHR, textStatus, errorThrown)
  {
    alert(textStatus)
  }
});

Здесь параметры диаграммы извлекаются из (в данном случае) локального файла JSON, он выглядит следующим образом: 

{
"legend": {        
    "show": true,
    "placement": "outsideGrid",
    "location": "s",
    "rendererOptions": {
        "numberRows": 1
    }
},
"seriesDefaults": {
    "showMarker": false,
    "fill": false
}}

Тогда сюжет генерируется как обычно. Одно ограничение (я считаю): если вы хотите использовать пользовательский рендерер (такой как $ .jqplot.DateAxisRenderer), вы не можете указать это через JSON.

...