HighCharts - Как создать динамическую диаграмму, которая экспортирует ВСЕ

Я пытаюсь экспортировать динамически сгенерированную диаграмму, и я заметил, что некоторые вещи не экспортируются. Например, моя диаграмма имеет PlotBands, которые являются динамическими в зависимости от отображаемых данных.

Когда я построил свою диаграмму, я последовал за стандартным макетом кодов всех замечательных примеров HighChart, где я сразу создал диаграмму на загрузке документа. Затем в моем коде я использую вызов Ajax для загрузки данных и изменения таких вещей, как заголовки, полосы заглавия, пользовательский текст и т.д.

Проблема заключается в том, что все изменения, внесенные на диаграмму после загрузки начальной диаграммы, не будут экспортироваться в изображения или PDF файлы. Мои PlotBands были добавлены во время вызова Ajax. Они не могут быть включены в объект диаграммы, построенный на document.load(). Поэтому HighCharts их просто игнорировали.

В моей диаграмме я хочу показать использование энергии в течение 24-часового периода на разных сайтах. Пользователь может выбирать разные дни и разные сайты. Диапазоны линий должны были указывать часы работы, и каждый сайт имеет разные часы работы, которые загружаются с данными. Кроме того, название диаграммы показывает название сайта, а субтитр показывает квадратную метку.

Кроме того, мой код рисует какой-то пользовательский текст в нижней части графика, используя команду HighCharts renderer text().

Мой код для едва функционирующего экспорта выглядит примерно так:

var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: "ChartContainer",
            type: "line",
            title: { text: null },
            subtitle: { text: null }
        }
    }
});

function UpdateChart() {
    $.ajax({
        url: "/my/url.php",
        success: function(json) {
            chart.addSeries(json[1]);
            chart.addSeries(json[2]);
            chart.setTitle(json[0].title, json[0].subtitle);
            chart.xAxis[0].addPlotBand({ color: "#FCFFB9", from: json[0].OpenInterval, to: json[0].CloseInterval, label: { text: "Operating Hours", verticalAlign: "bottom", y: -5, style: { fontSize: "8pt", color: "gray" } } });
            chart.renderer.text("Custom Text", 50, 100);
        }
    });
}

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

Ответ 1

(отвечая на мой собственный вопрос здесь)

Ключ состоит в том, чтобы изменить порядок построения диаграммы.

Не создавайте диаграмму на document.load(). Сгенерируйте его в функции success() вызова ajax.

Сначала проверьте, существует ли диаграмма и destroy(). Если ваш код позволяет пользователям динамически изменять параметры, это приведет к выполнению нового вызова ajax, который должен будет обновить график. Диаграмма должна быть уничтожена до ее повторной сборки.

Теперь создайте новую диаграмму с нуля. Но теперь у вас уже есть данные, необходимые для вызова ajax, поэтому вы можете создать его с нуля с правильной информацией. HighCharts будет экспортировать только данные, которые были включены при первом создании диаграммы. Таким образом, все пользовательские данные должны быть включены здесь. Если вам нужно что-то изменить на графике, уничтожьте его и перестройте с помощью пользовательских данных.

function UpdateChart() {
    $.ajax({
        url: "/my/url.php",
        success: function(json) {
            // If the chart exists, destroy it
            if (chart) chart.destroy();

            // Create the chart
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: "ChartContainer",
                    type: "line",
                    events: {
                        load: function(event) {
                            this.renderer.text("Custom Text", 50, 100);
                        }
                    },
                    title: { text: json[0].title },
                    subtitle: { text: json[0].sqft }
                },
                plotBands: {
                    color: "#FCFFB9",
                    from: json[0].OpenInterval,
                    to: json[0].CloseInterval,
                    label: {
                        text: "Store Hours", verticalAlign: "bottom", y: -5, style: { fontSize: "8pt", color: "gray" }
                    }
                }
            };

            // Add two data series to the chart
            chart.addSeries(json[1]);
            chart.addSeries(json[2]);

            // Set title and sub-title
            chart.setTitle(json[0].title, json[0].subtitle);
        }
    });
}

Теперь на диаграмме будут показаны все пользовательские вещи, которые вы добавили. Обратите внимание, что пользовательский текст, записанный на диаграмму с помощью команды renderer.text(), добавляется в событие chart.load(). По какой-то причине он работает только здесь.

Запомните ключ: HighCharts будет экспортировать только данные, которые были включены при первом создании диаграммы. Это сэкономит вам много головных болей.

Ответ 2

да - его возможные и высокопроизводительные версии поддерживают то, о чем вы упомянули здесь sample code http://jsfiddle.net/vijaykumarkagne/9c2vqq7q/ динамического highchart с использованием json-данных файла, размещенного в Google диск.

    $.getJSON("https://b943d995d961c8938d74bf398f8748e2b34864c6.googledrive.com/host/0B_i_hw1oG1HeaU9nMWxfTnJZd1k/data.json",{format:"json"},function(result){
     
               
chart = new Highcharts.Chart({
        chart: {
            zoomType: 'x',
            type: 'line',
            renderTo: 'container'
        },
        title: {
            text: ' '
        },
        subtitle: {
            text: 'Click and drag in the plot area to zoom in',
            x: -20
        },
        xAxis: {
            type: 'datetime',
            title: {
                text: ' '
            }

        },
        yAxis: {
            title: {
                text: ' '
            }
        },        

        series:[{
            name: 'Tokyo',
            data: result
        }]

     });
        });

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://b943d995d961c8938d74bf398f8748e2b34864c6.googledrive.com/host/0B_i_hw1oG1HeaU9nMWxfTnJZd1k/dataEmp.json"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<body>
<div id="container"></div>
</body>