10

動的に生成されたグラフをエクスポートしようとしていますが、エクスポートされないものがあることに気付きました。たとえば、私のチャートには、表示されているデータに応じて動的なPlotBandsがあります。

グラフを作成するときは、ドキュメントの読み込み時にすぐにグラフを生成する、すべての優れたHighChartの例の標準コードレイアウトに従いました。その後、コードの後半で、Ajax呼び出しを使用してデータをロードし、タイトル、プロットバンド、カスタムテキストなどを変更します。

問題は、最初のグラフの読み込み後にグラフで変更されたものが画像やPDFにエクスポートされないことです。私のPlotBandsはAjax呼び出し中に追加されました。それらは、上に構築されたチャートオブジェクトに含めることができませんでしたdocument.load()。そのため、HighChartsではそれらは都合よく無視されました。

私のグラフでは、さまざまなサイトでの24時間のエネルギー使用量を示したいと思います。ユーザーは、さまざまな日とさまざまなサイトを選択できます。稼働時間を強調するために必要なプロットバンドと各サイトには、データがロードされる異なる稼働時間があります。また、チャートのタイトルにはサイト名が表示され、サブタイトルには平方フィートが表示されます。

さらに、私のコードは、HighChartsレンダラー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);
        }
    });
}

残念ながら、ユーザーがグラフをエクスポートすると、タイトル、プロットバンド、および「カスタムテキスト」は表示されません。

4

2 に答える 2

1

はい-その可能性とハイチャートは、Googleドライブでホストされているファイルのjsonデータを使用した動的ハイチャートのsample code http://jsfiddle.net/vijaykumarkagne/9c2vqq7q/で言及したことをサポートします。

    $.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>

于 2014-11-26T10:12:08.963 に答える
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は、チャートが最初に作成されたときに含まれていたデータのみをエクスポートします。 これはあなたに多くの頭痛を救うでしょう。

于 2016-03-09T01:11:02.227 に答える