0

私の名前はジョシュです。コミュニティ カレッジの新聞社で働いています。最近、Highcharts を見つけて、ウェブサイトの投稿にインタラクティブなグラフを埋め込もうとしましたが、うまくいきませんでした。実際、それは完全な失敗でした。

私はすでにこの記事を読んで無駄にしようとしました: highcharts and wordpress

この問題を誰に相談できるかを知っている人は誰もいません。提案されたすべての解決策を試したように感じますが、残念ながら、html とコードに関してはかなり読み書きができません。どんな助けでも大歓迎です。

私はWordpress 3.5.1で作業しています。これが私が現在いるポイントです: 私は実行しています: 投稿とページのプラグインとインタラクティブなJavascriptとCSSでPHPを許可します.

私が持っている投稿のヘッダーオプションについて：

<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js">    </script>
<script src="http://www.domain.com/wp-content/uploads/2013/03/highcharts1.js"    type="text/javascript"></script>

一部の Web サイト (これを含む) で、Highcharts ライブラリをワードプレス サーバーにアップロードすることについて言及しているのを見ました。メディア ライブラリから highcharts.js ファイルをアップロードしましたが、やり方が間違っているような気がします。

投稿自体に私が置いた：

[php]
$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'State Funding of DSPS Services',
            x: -20 //center
        },
        subtitle: {
            text: 'Source:MPR Associates Report',
            x: -20
        },
        xAxis: {
            categories: ['2003-04', '2004-05', '2005-06', '2006-07', '2007-08',
                '2008-09', '2009-10', '2010-11', '2011-2012', '2012-13']
        },
        yAxis: {
            title: {
                text: '$ Million'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y +' Million';
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'College Total Funding',
            data: [77.8, 81.8, 86.2, 102.1, 109.3, 108.9, 64.9, 64.8, 64.6, 65.7]

        }]
    });
});

});
[/php]
<div id="container" style="width: 100%; height: 400px"></div>

過去100回ほど試行されているため、ページが空白になります。これが間違った場所への投稿または望ましくない投稿である場合はお詫び申し上げます。アドバイスや解決策は大歓迎です。

ありがとう、J

4

2 に答える 2

0

グラフをレンダリングするには、いくつかの準備が必要です。

  1. highcharts.js を含める - 完了
  2. グラフを定義および作成する JavaScript を含める - 完了
  3. ハイチャートにチャートを置く場所を与える - ?

最後の要素が欠けている可能性があると思います。これは、投稿内のどこかにタグを含めることによって行われます。div は、次のように「id」プロパティを使用して名前を付けることができます。

<div id='container'>mydiv</div>

'container' と呼ばれる場所を 'renderTo' したいことを既にハイチャートに伝えているので、必要なのはこれだけです。

これをワードプレスに追加するには、投稿エディターに移動し、「html」モードになっていることを確認してください。私のバージョンのワードプレスでは、これは投稿編集ペインの右上にあるタブで、オプション「ビジュアル」と「html」があります。

HTML モードでは、チャートを表示したい場所に私の div コードを追加するだけです。うまくいけば、それでうまくいくでしょう。

于 2013-03-22T08:58:45.127 に答える