Круговая диаграмма jqplot неправильно отображается. - PullRequest
Новая
       21

Круговая диаграмма jqplot неправильно отображается.

4 голосов
/ 28 июля 2011

Получение сообщения журнала: слишком маленький диаметр пирога, без рендеринга.

Затем, когда я нахожу или щелкаю внутри страницы, я получаю: Uncaught TypeError: Невозможно прочитать свойство '0' из неопределенного 

    <link href="/Content/jqPlot/jquery.jqplot.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery.jqplot.js" type="text/javascript"></script>
    <script src="/Scripts/jqplot.pieRenderer.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            //GetWeeklyProjectSummary();
            Test();
        });

        function Test() {
            var data = [["987 Project",74],["ABC Project",68],["XYZ project",26]];
            var plot1 = jQuery.jqplot('weeklyProjectSummary', [data],
                {
                    seriesDefaults: {
                        // Make this a pie chart.
                        renderer: jQuery.jqplot.PieRenderer,
                        rendererOptions: {
                            // Put data labels on the pie slices.
                            // By default, labels show the percentage of the slice.
                            showDataLabels: true
                        }
                    },
                    legend: { show: true, location: 'e' }
                }
              );
        }
    </script>

Вот div, в который он входит: 

<div id="weeklyProjectSummary"></div>

Вот что я получаю на странице: page output

Дайте мне знать, если вам нужнобольше деталей.

Ответы [ 5 ]

11 голосов
/ 29 августа 2011

У меня была похожая проблема при использовании jqplot с blueprintcss - на основе вашего снимка экрана, я думаю, вы используете blueprintcss.

Попробуйте удалить следующую строку: 

legend: { show: true, location: 'e' }

и посмотрите, если эторендерится правильно.

(Редактировать: Больше информации здесь:

https://bitbucket.org/cleonello/jqplot/issue/48/legends-doesnt-look-nice-when-using)

3 голосов
/ 12 мая 2015

Я добавил следующую строку в мой CSS-файл :

.jqplot-table-legend {width: auto; }

для перегрузки свойств из файла jqplot css.

работал для меня.

0 голосов
/ 01 марта 2016

Я просто хочу расширить ответ от Amaud T :

Я столкнулся с той же проблемой и использовал приведенный выше ответ с некоторыми небольшими изменениями: 

<style type="text/css">
    #chartComponentId table.jqplot-table-legend { width: auto !important;}
</style>
<div id="chartComponentId" class="chartComponent">
...
</div>

Из-за необходимости использования ! Important привязка этой таблицы стилей к определенным объектам div предотвращает любые побочные эффекты для других элементов.

0 голосов
/ 15 марта 2013

Включить canvas.min.js.Вы можете найти это в примерах в загрузках.Это сработало для меня с легендой.

0 голосов
/ 13 августа 2011

Ваше определение графика JQPlot кажется правильным.Пирог правильно отображается на моем экране.

Я не вижу jquery.js или jquery.min.js.Можете ли вы подтвердить, что в вашем коде есть ссылка на этот файл?

Кроме того, убедитесь, что все ваши файлы js / css имеют правильные ссылки (вы можете использовать расширение JSView Firefox , чтобы быстро подтвердитьчто они действительно включены).

...