Настройка Highcharts PHP/MySQL

Я пытаюсь настроить графики и предоставить демонстрационную версию нашим клиентам для их одобрения.

Некоторые заключительные проблемы, с которыми мы сталкиваемся сейчас,

  1. Проблема: Возможна ли разбивка на страницы в верхних диаграммах для столбчатых диаграмм. Предположим, что у нас есть 50 или 100 столбцов.

    Как мы можем избежать переполнения наших графиков.

    Например, взгляните на эту скрипку js

    Http://jsfiddle.net/justin69/4xSNU/1/

  2. Проблема: Если мы вставим изображение или логотип в диаграмму и попытаемся экспортировать его с помощью либо jpg/jpeg мы получаем сообщение об ошибке.

    На jsfidlle это работает,

    Но на нашем локальном хосте он выдает следующее сообщение об ошибке.

    About to transcode 1 SVG file(s) Converting 551bc090a93c120f987375135e7744db.svg to temp/551bc090a93c120f987375135e7744db.jpg ... ... error ( SVGConverter.error.while.rasterizing.file)
    Error while converting SVG. SVG code for debugging:

Author: Mihai Iorga, 2012-04-10
Source

2 answers

1. Переполненные Графики

A. Вы пробовали поворачивать этикетки? Это значительно уменьшило бы переполненность этикеток, которая была у вас раньше.

Вот ваша игра с модом ярлыка: http://jsfiddle.net/kayen/YSwk4/

B. Если у вас много значений и вы ограничены пространством по оси x, вы можете преобразовать диаграмму типа столбца в диаграмму типа бара.

Вот ваша скрипка с мод гистограммы: http://jsfiddle.net/kayen/QqPha/

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

 5
Author: kayen, 2012-04-24 10:32:27

Давайте посмотрим, смогу ли я вам помочь...

"Переполненный график"

Я могу представить три способа избежать того, чтобы ваши графики были "переполнены":

Метод 1: Позвольте пользователю выбрать, что видеть.

Либо скройте добавление visible: false к некоторым или ко всем вашим сериям, использование этого позволит пользователю выбрать, какие данные он хочет видеть. Например:

series: [
            {
                name: ...,
                data: ...,
                visible: false
            },
            ...
        ]

Если вы выберете этот пример, вы могли бы также подумать о добавлении кнопки для отображения/скрытия всего, чего вы можете достичь с помощью использование:

Скрыть все: 

for(i=0; i < chart.series.length-1; i++)
    chart.series[i].hide();

Показать все: 

for(i=0; i < chart.series.length-1; i++)
    chart.series[i].show();

Метод 2: Увеличение масштаба вашего выхода из проблемы

В альтернативном варианте вы можете использовать zoomType: 'x' в своей диаграмме, позволяя пользователю увеличивать и просматривать данные в деталях, затем пользователь может прокручивать масштаб слева и справа от диаграммы или сбросить масштаб и выбрать другую точку для просмотра.

Метод 3: переполнение

В альтернативном варианте вы можете создать гигантскую диаграмму и используйте переполнение, чтобы сделать div диаграммы прокручиваемым, или скройте переполнение и управляйте scrollX & scrollY через jQuery.

Можете ли вы предоставить код или ссылку на скрипку примера svg, чтобы я мог проверить ваш код и посмотреть, смогу ли я вам в этом помочь?

Спасибо.

 8
Author: Diogo Raminhos, 2012-04-18 16:00:13