Данные диаграммы загрузки диаграммы jquery Struts 2 с локальными данными

Я хочу загрузить данные диаграммы с локальными данными.

 <sjc:chart
       id="chartPlaceHolder"
       cssStyle="width: 600px; height: 400px;"
       pie="true"
       pieLabel="true"
       dataType="local"        
   />

Затем я использовал (как указано в Refresh/Reload Flot In Javascript)

//This data is created dynamically from a grid when grid completed 
var chartData= [
                { label: "Chrome",  data: 36.3, color: "#89A54E"},
                { label: "Other",  data: 0.8, color: "#3D96AE"}
            ];
var plot = $.plot($('#chartPlaceHolder'));
    plot.setData(chartData);
    plot.setupGrid();
    plot.draw();

Я получаю некоторое исключение jquery aB is undefined в API jquery

Любые комментарии ?!


person Alireza Fattahi    schedule 07.02.2016    source источник


Ответы (1)


Вам не хватает двух дополнительных параметров для $.plot().

Вы должны прочитать основное использование.

Создайте div-заполнитель для размещения графика:

<div id="placeholder"></div>

Вам нужно установить ширину и высоту этого div, иначе библиотека графиков не знает, как масштабировать график. Вы можете сделать это встроенным, как это:

<div id="placeholder" style="width:600px;height:300px"></div>

Вы также можете сделать это с помощью внешней таблицы стилей. Убедитесь, что заполнитель не находится внутри чего-либо со свойством CSS display:none — в этом случае у Flot возникают проблемы с измерением размеров метки, что приводит к искажению внешнего вида, и могут возникнуть проблемы с измерением размеров заполнителя, что является фатальным (это вызовет ошибку исключение).

Затем, когда div будет готов в DOM, который обычно готов к документу, запустите функцию построения графика:

$.plot($("#placeholder"), data, options);

Здесь данные — это массив рядов данных, а параметры — это объект с настройками, если вы хотите настроить график. Взгляните на примеры, чтобы понять, что добавить, или посмотрите справочник по API. Вот быстрый пример, который нарисует линию от (0, 0) до (1, 1):

$.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });

РЕДАКТИРОВАТЬ:

Вы можете попробовать код ниже. Это перезагружает диаграмму с данными после того, как диаграмма была создана без данных.

<sjc:chart
    id="placeholder"
    cssStyle="width: 600px; height: 400px;"
    pie="true"
    pieLabel="true">
</sjc:chart>
<script>
  $(function(){
    var chartData= [
      { label: "Chrome",  data: 36.3, color: "#89A54E"},
      { label: "Other",  data: 0.8, color: "#3D96AE"}
    ];
    var series =  { pie: { show: true }};
    var o = {};
    o.data = chartData;
    o.series= series;
    $.struts2_jquery_chart.chart($("#placeholder"), o);
  });
</script>
person Roman C    schedule 07.02.2016
comment
ты прав. Но когда я инициирую диаграмму с помощью sjc:chart, я не знаю, как получить и указать путь к data и option, я даже пытался указать для них пустой параметр, но это не сработало. Не могли бы вы сказать мне, как я могу получить сюжетный объект - person Alireza Fattahi; 07.02.2016
comment
Почему вы инициируете sjc:chart? Flot — еще одна библиотека для графиков. - person Roman C; 07.02.2016
comment
sjc:chart использует флот под капотом. вызов sjc:chart загрузит все необходимые файлы js диаграммы flot и flot.pie - person Alireza Fattahi; 07.02.2016
comment
Непонятно что вы хотите, данные в формате [[]], а ваши данные имеют другой формат. И вы должны предоставить ему список sjc:chartData или атрибут href - person Roman C; 07.02.2016
comment
Спасибо @RomanC. Данные могут быть массивом строк json, как указано в http://www.pikemere.co.uk/blog/flot-how-to-create-pie-charts/ . Что ж, позвольте мне спросить так... пожалуйста, посмотрите этот вопрос stackoverflow.com/questions/23326472/, на которые вы получили ответ. Вопрос был о загрузке данных сетки локально. В этом примере простой $("#gridtable") вернул объект jqGrid, который затем мы могли бы легко установить его data и вызвать trigger("reloadGrid"); Возможно ли сделать это с plot - person Alireza Fattahi; 08.02.2016
comment
Я не уверен, что вы можете получить plot, подписавшись на plotclick или plothover. Дайте мне знать, если это работает для вас. jqGrid — это функция, и у нее другой API. - person Roman C; 09.02.2016