Использование JSON в amcharts - Как изменить вывод JSON (Ruby on Rails) - PullRequest
Новая
       6

Использование JSON в amcharts - Как изменить вывод JSON (Ruby on Rails)

0 голосов
/ 03 апреля 2012

Я пытаюсь использовать amcharts и хочу использовать JSON для форматирования данных для моего графика. Однако, похоже, что синтаксис, который принимает amcharts, не является допустимым JSON.

Вот код javascript для данных для жестко закодированной диаграммы amchart: 

 var chartData = [{
            country: "Czech Republic",
            litres: 301.90
        }];

Вот код, если я хочу создать ту же диаграмму со встроенным рубином:

Контроллер 

 @chart_data = [{"country": "Czech Republic", "litres": 301.90}]

View 

 var chartData = <%= @chart_data.to_json %>;

Выход действительный JSON : 

 [{"country": "Czech Republic", "litres": 301.90}]

Однако, amcharts принимает: 

 [{country: "Czech Republic", litres: 301.90}]

Поэтому моя диаграмма не работает, потому что amcharts не принимает действительный JSON. Так есть ли способ создать «недействительный» JSON без двойных кавычек по стране и литрам? Или есть лучший способ получить данные в форме, которую принимает amcharts? Любая помощь будет принята с благодарностью.

Вот полный код JavaScript: 

 <script type="text/javascript">
        var chart;
        var legend;

        var chartData = [{
            country: "Czech Republic",
            litres: 301.90
        }, {
            country: "Ireland",
            litres: 201.10
        }, {
            country: "Germany",
            litres: 165.80
        }, {
            country: "Australia",
            litres: 139.90
        }, {
            country: "Austria",
            litres: 128.30
        }, {
            country: "UK",
            litres: 99.00
        }, {
            country: "Belgium",
            litres: 60.00
        }];

        AmCharts.ready(function () {
            // PIE CHART
            chart = new AmCharts.AmPieChart();
            chart.dataProvider = chartData;
            chart.titleField = "country";
            chart.valueField = "litres";
            chart.outlineColor = "#FFFFFF";
            chart.outlineAlpha = 0.8;
            chart.outlineThickness = 2;

            // WRITE
            chart.write("chartdiv");
        });
    </script>

Ответы [ 2 ]

1 голос
/ 03 апреля 2012

Возможно, я здесь упускаю суть, но если вы нигде не используете @chart_data, вы можете просто построить строку данных псевдо-json в контроллере и удалить вызов .to_json в вашем представлении:

Контроллер: 

@chart_data = "[{country: \"Czech Republic\", litres: 301.90}]" #build this string dynamically

Просмотр: 

var chartData = <%= @chart_data %>;

Если вы используете @chart_data в другом месте, вы также можете создать @ formatted_chart_data

Если вы хотите использовать ajax для уменьшениянакладные расходы, когда диаграмма не отображается, вы можете добавить действие, которое ничего не делает, но возвращает данные диаграммы и вызывает их из вашего js:

Контроллер: 

def get_formatted_chart_data
  chart_data = "[{country: \"Czech Republic\", litres: 301.90}]"
  render :text => chart_data
end

Или это динамически строитСтрока, которая является трудной частью?

0 голосов
/ 11 июня 2013

От amCharts: «amCharts напрямую не поддерживает JSON. Он не загружает внешние файлы данных или что-то в этом роде. Он просто использует собственные объекты данных JavaScript. Поэтому на самом деле зависит от анализатора JS браузера, какой формат данных он может или не может читать . "

http://www.amcharts.com/forum/viewtopic.php?id=7049

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

Что вы также можете сделать, это создать общую функцию javascript и использовать небольшой RegEx для фильтрации JSON в дружественном формате amCharts.and 

function CleanJSONForAMCharts(json) {
    return json.replace(/"(\w+)"\s*:/g, '$1:');
}

Теперь это, конечно, строка, а не массив ожидаемых объектов amCharts. Eval () должен быть вызван для возвращаемой строки, прежде чем она может быть передана в dataProvider. 

//sample data that would have been returned from a RESTful service or another JSON returning method
var chartData = CleanJSONForAMCharts("[{\"title\":\"sample 1\",\"value\":130},{\"title\":\"sample 2\",\"value\":26}]");

var chart = new AmCharts.AmSerialChart();
chart.categoryField = "title";
chart.dataProvider = eval(chartData);

var graph = new AmCharts.AmGraph();
graph.valueField = "value";
graph.type = "column";
graph.fillAlphas = 1;
chart.addGraph(graph);

chart.write("chartdiv");
...