HighCharts - Jak utworzyć dynamiczny wykres eksportujący WSZYSTKO

Question

Próbuję wyeksportować dynamicznie generowany wykres i zauważyłem, że niektóre rzeczy nie są eksportowane. Na przykład, mój wykres ma PlotBands, które są dynamiczne w zależności od wyświetlanych danych.

Podczas tworzenia wykresu postępowałem zgodnie ze standardowym układem kodu wszystkich wspaniałych przykładów HighChart, w których wygenerowałem wykres natychmiast po załadowaniu dokumentu. Następnie w moim kodzie używam wywołania Ajax do ładowania danych i modyfikowania takich rzeczy jak tytuły, paski fabularne, niestandardowy tekst, itp.

Problem polega na tym, że wszystko zmodyfikowane na wykresie po początkowym wczytaniu wykresu nie będzie być eksportowane do obrazów lub plików PDF. Moje PlotBands zostały dodane podczas połączenia Ajax. Nie można ich uwzględnić w obiekcie wykresu, który został zbudowany pod numerem document.load(). Byli więc wygodnie ignorowani przez HighCharts.

Na wykresie chcę pokazać zużycie energii w ciągu 24 godzin w różnych lokalizacjach. Użytkownik może wybrać różne dni i różne witryny. Pasma wydruku musiały podświetlać godziny pracy, a każda strona ma różne godziny pracy, które są załadowane danymi. Również tytuł wykresu pokazuje nazwę strony, a podtytuł pokazuje kwadratowy materiał.

Dodatkowo mój kod rysuje niestandardowy tekst na dole wykresu za pomocą polecenia renderowania HighCharts text().

Mój kod na ledwo funkcjonującego eksportu wygląda mniej więcej tak:

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); 
     } 
    }); 
} 

Niestety, tytuł, zespoły działka i „custom text” nie pojawi się, jeśli użytkownik eksportuje wykres.

Answer 1

(odpowiadając na moje własne pytanie tutaj)

kluczem jest ponownie zorganizować w jaki sposób zbudować swój wykres.

Nie generuj wykresu na document.load(). Wygeneruj go w funkcji success() wywołania ajax.

Najpierw sprawdź, czy wykres już istnieje i destroy() go. Jeśli twój kod pozwala użytkownikom na dynamiczną zmianę ustawień, spowoduje to wykonanie nowego wywołania ajax, które będzie wymagało aktualizacji wykresu. Wykres musi zostać zniszczony przed ponownym zbudowaniem.

Teraz utwórz nowy wykres od podstaw. Ale teraz masz już potrzebne dane z wywołania ajax, więc możesz zbudować je od zera z poprawnymi informacjami. HighCharts będzie eksportować dane, które zostały uwzględnione przy pierwszym utworzeniu wykresu. W tym miejscu należy uwzględnić wszystkie niestandardowe dane. Jeśli chcesz coś zmienić na wykresie, zniszcz go i przebuduj, używając niestandardowych danych.

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); 
     } 
    }); 
} 

Teraz na wykresie zostaną wyświetlone wszystkie niestandardowe elementy, które dodałeś.Zwróć uwagę, że niestandardowy tekst zapisany na wykresie przy użyciu polecenia renderer.text() został dodany do zdarzenia chart.load(). Z jakiegoś powodu działa to tylko tutaj.

Zapamiętaj klucz: HighCharts wyeksportuje dane, które zostały uwzględnione przy pierwszym utworzeniu wykresu. Pozwoli to zaoszczędzić wiele bólów głowy.

Answer 2

Tak - jego możliwe i wysokiej jakości obsługuje rzeczy, o których tu wspomniano, jest to dynamiczny highchart z wykorzystaniem danych json pliku przechowywanego na dysku 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>