常連

javascriptを始めて間もない者です。
Highstockを用いてグラフを書きたいのですが、jsonからのデータの抽出方法がわかりません。

sample.jsonの中身は
{data:[{"data1":~,"data2":~,"data3":~]},{・・・・・}]}
となっております。
これをjavascriptで読み込み、新たな配列
data=[
[data[0].data1,data[0].data2],
[data[1].data1,data[1].data2],
・・・・・
]
となるように抽出したいと考えています。
htmlファイルとjsonファイルはサーバ上の同じディレクトリ内に配置しています。
$.getJSONの使い方などをいろいろと調べましたが、ずっとうまくいかなかったのでこちらで質問させていただきました。。。
よろしくお願いします。

jsonファイルを読み込んでデータ配列をつくる

blade上で日付検索をしてConroller内でその日付を$hidukeという変数に入れてwhereに書いています。
そしてそのクエリを$sqlという変数に入れて先ほどと同じbladeに渡しています。
そしてその結果を同じbladeにHighchartsを使用してグラフ化しようとしていてそこで$sqlを使用しています。

ですが、最初にページを開いた際にタイトルのエラーが出てしまいます。

最初にアクセスした時に変数が空なのでエラーが出てしまうのは理解しているのですが
対処法がわかりませんでした。

初回アクセス時に変数を無いことにしたいのですができますでしょうか？

よろしくお願いします。
```search.blade.php
{{ Form::open(['route' => ['time.search'], 'method' => 'post', 'id' => 'searchForm', 'name' => 'searchForm', 'class' => 'form-horizontal']) }}
        <div class="row">
            <div class="col-md-12">
                <div class="panel-body">
                    <div class="form-group">
                        {{ Form::label('hiduke', '日付：', array('class' => 'col-sm-2 control-label')) }}
                        <div class="col-sm-10">
                            <div class="input-daterange input-group" id="datepicker">
                            {{ Form::tel('hiduke', null, ['class' => 'input-sm form-control', 'placeholder' => '入力', 'id' => 'hiduke']) }}
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <input type="submit" class="btn btn-default" id='compositeBtn' value="検索">
                            <input type="button" class="btn btn-default" id='clearBtn' value="クリア">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {{ Form::close() }}

.
.
.
<script>
.
.
.
 series: [{  //グラフの中身（データの設定）
                pointWidth: 50,
            name: "本日の送信件数",  //各データの名前
            data:[<?php echo $sql; ?>
                  ],
                  dataLabels:{
                  enabled:true,
                  color:'#000000'//各データ(数値)
              }
        }]
.
.
.
</script>
```

```SearchController
 public function index(){
       
       return view('admin::time.search');  
   }
   
   /**
    * 検索
    */
   public function search(){
       //入力値取得
       $hiduke = Request::Input('hiduke');
  
       //日付が入力されていない場合エラー
       if(!$hiduke){
           return redirect()->route("time.search")->withErrors('日付を入力してください。')->withInput();
       }
       
       $sql = Read::select(DB::raw('CONVERT(varchar,work_dt,111)'))
                       ->join('arrival','comp.key_no','=','arrival.key_no')
                       ->where((DB::raw('CONVERT(varchar,send_dt,111)')),'like',"$hiduke%")                               
                       ->groupBy((DB::raw('CONVERT(varchar,work,111)')))
                       ->count('send_dt');
       
       return view('admin::time.search',['sql' => $sql]);
   }
```

```routes.php
Route::get('time/search',['as' => 'time.search', 'uses' => 'SearchController@index']);
Route::post('time/search', ['as' => 'time.search', 'uses' => 'SearchController@search']);
```

LaravelでUndefined variable

Highchartsを使って円グラフを作成しています。

基本的な質問で申し訳ございませんが

1.こちらの円グラフの色を変えるのはどうすればいいでしょうか。

2.データラベルが左右に表示されているのでスマホで見たときに円グラフ自体の幅が狭くなり、小さくなってしまいます。データラベルの表示方法を変えたりするのはどうすればいいでしょうか。

宜しくお願い致します。

![イメージ説明](c58d662ced15064593594391438f0615.jpeg)

highchartsで円グラフの色とデータラベルの表示方法を変えたい

### 実現したいこと
穴抜けになっているデータを描画するとこうなります。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-04-06/daa8ceae-9021-47d7-8b12-3ce25ff9e51c.png)

これを、穴抜け部分にも線を引きこういうようにしたいです。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-04-06/21a1a9e4-7f84-4c35-b59d-83f4abfbbe5e.png)

これを実現するには、どうしたらいいでしょうか？
※「上記図のように実現したい内容が再現できてるからいいじゃないか」と思われるかもしれませんが、2つ目の図は、nullになったら1つ前の日付のデータをコピーしてあてがうという処理を入れているため、それっぽい形に仕上がっているにすぎません。

本来であれば、ちゃんとしたHighchartsの書き方（や、オプションなど）で描画させたいのです。

※Highchartsのバージョンは「6.0.3」を使っています。

### 発生している問題・分からないこと
上記の通りです。
Teratail内を調べたところ似た質問がありました。
[js]折れ線グラフで欠損値を飛ばして線を結びたい](https://teratail.com/questions/180680)
こちらはHighchartsではなくChart.jsのようでそれであればオプション「spanGaps: true,」を使うことで実現出来るようです。

これと同じようにHighchartsでもspanGaps: true,があるのかなと思い公式サイトでドキュメントを調べたところ関連する記事がありませんでした。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-04-06/46076c0b-51e9-4ab0-96a2-9e30b5ac40a4.png)
https://api.highcharts.com/highcharts/chart


### 該当のソースコード

```
具体的なソースコードは社外秘情報のため載せられません。
そのため、「このサイトが参考になる」や「こんなオプションを使ったらいい」などがありましたらお教えいただければと思います。
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
上記の通りです。Teratail内で調べ似た質問からspanGaps: true,が使えそうと思い実装しましたが公式サイトを見る限りHighchartsには非対応となっているそうで見つかりませんでした。

### 補足
よろしくお願いいたします。


---

『追記』
melian様がご指摘くださった通り
plotOptions.series.connectNulls の通りそれを設定したところうまくいきました！
https://api.highcharts.com/highcharts/plotOptions.series.connectNulls
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-04-07/b2124f97-1b5e-4187-b494-dc5929f5f9a6.png)
ありがとうございます！！

JavaScriptのHighchartsで欠損値に線を引く方法を知りたい

プログラム初心者です。
highchartsを使ってhtmlファイルを表示させたいのですが、うまくいきません。（黒色の画面表示になってしまいます）
![イメージ説明](1605e8f229c6dd91377b4117cc894b3d.png)
![イメージ説明](2533c9233360d8e5125049d3ce936f05.png)
こちらのブログを参考にして作成しました。
http://hutabah.hatenablog.jp/entry/2017/06/22/203000


以下、作成したファイルです  

test.html
```
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/home/yoshiaki/JS/highcharts.js"></script>
  <link rel="stylesheet" type="text/css" href="/home/yoshiaki/test/sample.css">
</head>

<body>
  <div id="container"></div>
  <script src="/home/yoshiaki/test/sample.js"></script>
</body>
</html>

```  
sample.css
```
#container {
	min-width: 310px;
	max-width: 650px;
	height: 400px;
	margin: 0 auto;
}
```  

sample.js
```
Highcharts.chart('container', {  //グラフ描画のテンプレート

    title: {  //グラフのタイトル
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {  //グラフのサブタイトル
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {  //y軸の設定
        title: {  //y軸のタイトル
            text: 'Number of Employees'
        }
    },
    legend: {  //グラフの凡例
        layout: 'vertical',  //縦方向に並べる
        align: 'right',  //グラフの右に表示（左右中央）
        verticalAlign: 'middle'  //グラフの中央に表示（上下中央）
    },

    plotOptions: {  //点の設定
        series: {
            pointStart: 2010  //2010から書き始める
        }
    },

    series: [{  //グラフの中身（データの設定）
        name: 'Installation',  //各データの名前
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]  //各データ(数値)
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]  //nullに設定すると表示されません
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }]

});
```

highchartsで作成したグラフが表示されない

### 実現したいこと
ちゃんとした折れ線グラフにしたい。

### 発生している問題・分からないこと
期間幅が一定でない場合、折れ線グラフが前後してしまう。

**折れ線グラフが前後してしまうソース**
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-04-06/1dba70ba-eb03-4ed6-bc81-b15f73f29bb5.png)

**折れ線グラフがきれいに時系列順に並んでくれるソース**
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-04-06/080e3a27-9be3-41cb-9b66-321807435a5d.png)

期間の間隔は一定ではないデータを折れ線グラフで描画したいです。
具体的な生の値は載せられないので「rand関数」で代用しています。
期間の間隔が一定の時はちゃんと描画され、そうでないときは子供が書いた絵みたいに線が前後してしまいます。
なぜこのように、間隔が一定でない場合は、折れ線グラフが行ったり来たりな描画になるのでしょうか？



### 該当のソースコード

```折れ線グラフが前後してしまうソース
■折れ線グラフが前後してしまうソース
        $unixTime = [];
        for ($i = 0; $i < count($timestamp); $i++) {
            $nowUnix = strtotime('-'.($i * rand(1, 2)).' day');
            $unixTime[] = ($nowUnix) * 1000;

            $oresenGraph[] = rand(1,rand(1,10) * 10000);
        }
```

```折れ線グラフがきれいに時系列順に並んでくれるソース
■折れ線グラフがきれいに時系列順に並んでくれるソース
        $unixTime = [];
        for ($i = 0; $i < count($timestamp); $i++) {
            $nowUnix = strtotime('-'.($i * 2).' day');
            $unixTime[] = ($nowUnix) * 1000;

            $oresenGraph[] = rand(1,rand(1,10) * 10000);
        }
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
「highchart グラフ ずれる」や「highchart 折れ線グラフが 前後する」などで検索しましたが、解決に至る情報は得られませんでした。

### 補足
特になし

JavaScriptのHighcharts.jsで折れ線グラフ時系列が前後してしまう理由が分からない

### 前提・実現したいこと

HighChartsで表示するデータによってY軸のMIN/MAXを切り替えたい


### 発生している問題・エラーメッセージ

chartを最初にnewで作成しておき、その後指定された条件によって、
データの異なる1種類、または2種類のグラフを切り替えて表示するため、
addSeries()を利用しています。
グラフのタイプは棒グラフです。
データによって、Y軸のMIN値を０ではなく30などの値でグラフを
表示させたいのですが、どうすればよいかわかりません。

毎回、newしてグラフを作成すれば実現できるのはわかっているのですが、
new後にyAxisのmin,maxの値を変更する方法はないのでしょうか？


### 関連質問

折れ線グラフの場合、yAxisのmin/maxを指定しないと、
表示する値によってmin/maxが自動で計算されます。
棒グラフの場合のminは必ず0、maxは自動で決まるようです。
これはグラフの種類によって、デフォルトでは
そのように表示するようにしているのでしょうか？

HighChartsのaddSeriesでY軸のMIN/MAXを変更したい

【やりたいこと】
PHP＋「highcharts」でグラフ作成に挑戦してます。
同一ページ内に、同じ種類のグラフを複数作成したいです。
※グラフ数は可変


【参考にしたページ】
[円グラフ](http://www.tailtension.com/demo/highcharts/hightcharts_pie.html)


例えばこの円グラフを3つにしたい場合です。
※数値データ自体はもちろん変えて



【調べた結果】
別種類のグラフを重ねたり、別種類のグラフを複数表示する方法は見つかりました。
ですが、今回やりたいことは「同じ種類の」グラフなので違うようでした。


【質問】
実現するにはどんな方法があるでしょうか？

グラフを作成したい回数だけhighchartsの「グラフ生成メソッド」を呼べば良いと考えましたが
html(view)側からjqueryのメソッドを複数回呼ぶことは可能なのでしょうか？
まずここが分かりません。

あるいは、jqueryのメソッド側を修正すべきでしょうか？


よければアドバイス宜しくお願い致します。



```JavaScript
<script type="text/javascript">
$(function () {
	$('#container').highcharts({
        chart: {
            type: 'pie',
        },
        series: [{
            data: [
                ['Firefox',<?php echo $f_count; ?>],
                ['IE', <?php echo $i_count; ?>],
                ['Chrome', <?php echo $c_count; ?>],
                ['Safari', <?php echo $s_count; ?>],
                ['Opera', <?php echo $o_count; ?>],
                ['Others', <?php echo $others; ?>]
            ]
        }]
    });
});
</script>
コード
```