jqueryのプラグインjqplotを利用したグラフのデザインカスタマイズ

下記のプラグインで表のデザインをカスタマイズしているのですが
サンプルでも表示されている外枠2pxの線をどうしても1pxに変更できません。
http://www.jqplot.com/tests/line-charts.php

最終的に外側の枠は表の内枠と同色且つ1pxとしたいのですが手法をご教授頂けますでしょうか。
何卒、宜しくお願い致します。

ryunix様

早々にご回答いただき誠にありがとうございました。

私の説明不足で大変恐縮でございますが
実は頂いたソースのような状態から右図のようにできず困っておりました。

質問させて頂いてからも色々試してみたのですが
そもそもjsonの編集だけでは解決できないような気もしております、、、

![イメージ説明]WIDTH:600

行動規範の内容に同意します

回答1件

あんまりよく分かってないですが、一応それっぽくなりました。
borderWidth と shadow を指定しています。
shadow を指定する場合と、指定しない場合を試してほしいと思います。
(たぶん好みの問題なので)

lang
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.css" />
6  </head>
7  <body>
8    <div id="chartdiv" style="height:400px;width:300px;"></div>
9    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
10    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>
11    <script>
12<!--
13    $(function() {
14        $.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]], {
15            axes: {
16                yaxis: { min:-10, max:240 }
17            },
18            series: [
19                { color:'#5FAB78' }
20            ],
21            grid: {
22                borderWidth: 0, // 1.0 だと太く見える...
23                shadow: false   // これはお好みで
24            }
25        });
26    });
27//-->
28    </script>
29  </body>
30</html>

参考: jqPlot

投稿2015/06/30 14:37

編集2015/07/02 11:57

ryunix

総合スコア1656

kaz1109

2015/07/01 01:34

>ryunix様早々にご回答いただき誠にありがとうございました。私の説明不足で大変恐縮でございますが実は頂いたソースのような状態から右図のようにできず困っておりました。質問させて頂いてからも色々試してみたのですがそもそもjsonの編集だけでは解決できないような気もしております、、、 https://teratail.com/uploads/contributed_images/9475eb6d554dbd809959a7181386cdcc.png

ryunix

2015/07/01 05:40

外側の枠というのは、ちょっとはみ出している部分のことでしょうか？ :)

kaz1109

2015/07/01 09:48

ご連絡ありがとうございます。はい。基本線は#CCCCCCで描画されておりますが一番左のY軸と一番下のX軸に#E6E6E6で描画されている部分の線がどうしても消すことができません。最終的なイメージは先程、添付させて頂いた右図イメージママでございます。

ryunix

2015/07/01 13:11

はみ出している部分を消す方法は判明したのですが、色の設定は見当たりませんね :( 一応、消す方法を残しておきます。 tickOptions -> showMark: false スタイルシートはこの辺りかなと思いましたが、ダメでした。 .jqplot-axis-tick

kaz1109

2015/07/02 02:23 編集

度々ご回答頂いてるにも関わらず、私の伝え方が悪く大変申し訳ございません。図を更新致しました。赤枠の線を削除したいのですが消すことができませんでした。 https://teratail.com/uploads/contributed_images/62a7615c90fc47ddb5779ad4375fa020.png ryunix様のお時間を頂くのも申し訳ないのでもう少し自身でも調査を続けてみます。諸々ご回答いただき、誠にありがとうございました。

ryunix

2015/07/02 11:56

該当の箇所をやっと理解出来ました :o あれからいくつか試してみたのですが、消すことが出来ませんでした。お力になれず、申し訳ないです :(

kaz1109

2015/07/03 01:18

いえいえ！ご回答頂けただけでもありがたく存じます。また意外と解決しづらい問題ということも分かったので少し安心？しました。また何か御座いましたらどうぞ宜しくお願い致します。

行動規範の内容に同意します