質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.35%

  • jQuery

    4888questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    319questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jqPlotで作成する棒グラフのpointLabelsがずれる

受付中

回答 0

投稿 2017/12/06 11:30 ・編集 2017/12/11 09:25

flag 質問者が3日前に「まだ回答を求めています」と言っています。

  • 評価
  • クリップ 0
  • VIEW 50

前提・実現したいこと

初めての質問になります。質問形式に問題がありましたらお教えください。

PC・携帯対応のwebページにてjqPlotで積立式の棒グラフを表示しようとしています。
個々のデータ数をpointLabelにて表示したいと思ったのですが、
携帯から作成した棒グラフを表示させたとき、
1つ目の凡例に対応するデータ(棒グラフで一番下に来るデータ)の数字のみ
明らかにずれた位置に表示されてしまっています。

どのような問題があってこのような状態になっているのかわからないので
皆様の知恵をお貸しいただければ幸いです。

発生している問題・エラーメッセージ

青の部分(凡例で言う国語)の点数が下にずれてしまっている図

該当のソースコード

<div id="jqPlot-sample" style="height: 400px; width: 400px;"></div>
  ~中略~
<link rel="stylesheet" type="text/css" href="js/jquery.jqplot.min.css" />
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="js/jqplot.pointLabels.js"></script>
<script type="text/javascript" src="js/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="js/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="js/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="js/jqplot.canvasAxisTickRenderer.js"></script>
<script type="text/javascript" src="js/jqplot.enhancedLegendRenderer.js"></script>
<script>
jQuery( function() {
    Kokugo = [ [ 1, 23 ], [ 2, 34 ], [ 3, 52 ], [ 4, 47 ], [ 5, 78 ], [ 6, 66 ] ];
    Sansuu = [ [ 1, 65 ], [ 2, 72 ], [ 3, 74 ], [ 4, 63 ], [ 5, 85 ], [ 6, 90 ] ];
    Rika = [ [ 1, 83 ], [ 2, 81 ], [ 3, 79 ], [ 4, 88 ], [ 5, 78 ], [ 6, 96 ] ];
    Shakai = [ [ 1, 81 ], [ 2, 86 ], [ 3, 71 ], [ 4, 69 ], [ 5, 58 ], [ 6, 82 ] ];
    jQuery . jqplot( 'jqPlot-sample',
        [ Kokugo, Sansuu, Rika, Shakai ],
        {
            title: '科目別得点推移の積み上げ縦棒グラフ',
            stackSeries: true,
            showMarker: false,
            seriesDefaults: {
                renderer: jQuery . jqplot . BarRenderer,
                pointLabels: {
                    show: true,
                    location: 's',
                    stackedValue: false,
                    formatString: '%d'
                } },
            axes: {
                xaxis: {
                    label: '月',
                    renderer: jQuery . jqplot . CategoryAxisRenderer,
                },
                yaxis: {
                    label: '点数',
                    ticks: [ 0, 100, 200, 300, 400 ],
                    tickOptions: {
                        formatString: '%d'
                    }}},
            series: [
                { label: '国語' },
                { label: '算数' },
                { label: '理科' },
                { label: '社会' }
            ],
            legend: {
                show: true,
                placement: 'outside',
                location: 'ne',
            }});
      });
</script>

試したこと

pointLabelsで「stackedValue」をtrueに変更すると多少の改善が見られました。

現在の環境(2017/12/11追記2)

情報追加・修正依頼ありがとうございます。
---質問の意図に対する回答がこれで良いのか不安ですが回答させていただきます。---
すいません。質問の意図を勘違いしていました。正しくは
「ラベルがずれるのは携帯での環境のみ」
ということになります。
---○PC---
---Windows10(64bit、32bit両方)---
○携帯
iPhone(5以降全て)
Android
○ブラウザ
---・PC:IE11、Edge、Chrome、Firefox---
・携帯:safari、Chrome

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • kentei_syunrai

    2017/12/09 20:21

    どんな環境で発生しますか?(PC環境?携帯環境?ブラウザ等についても)

    キャンセル

  • kentei_syunrai

    2017/12/09 22:43

    記載いただいたすべての環境でずれが発生すると考えてよいでしょうか。おそらく上記の内容ってjqPlotのサンプルそのままですよね? 少なくともPC環境ではずれないと思うのですが。CSSなど改造していますか?

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.35%

関連した質問

同じタグがついた質問を見る

  • jQuery

    4888questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    319questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。