常連

### 前提・実現したいこと

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を変更したい

### 実現したいこと
穴抜けになっているデータを描画するとこうなります。
![イメージ説明](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で欠損値に線を引く方法を知りたい

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

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

**折れ線グラフが前後してしまうソース**
![イメージ説明](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で折れ線グラフ時系列が前後してしまう理由が分からない

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で円グラフの色とデータラベルの表示方法を変えたい

現在、チェックボックスをクリックしたらResas apiから都道府県別人口推移を取ってきてhighchartsライブラリーを用いてグラフを表示するというSPAを作成しているのですが、うまくできなくて困ってます????

現在の進捗はチェックボックスをクリックしたらapiから都道府県別の人口推移を取得しconsoleに出力、再度、クリックしたら空の配列に戻す(今後、グラフに表示するという機能を実装した時にグラフから消えるようにするため)という機能を実装中です。

以下の写真が完成イメージ、コードが現在の状況です。

![![イメージ説明](87bbce04d72a39d82e70b8112019afb0.png)]

```App.jsx
import React from 'react';
// import { CheckField } from './components/CheckField';
// import Highcharts from 'highcharts';
// import HighchartsReact from 'highcharts-react-official';
import './App.css';
import { Main } from './components/Main';

function App() {
  return (
    <div className="App">
      <h2>Title</h2>
      <Main></Main>
    </div>
  );
}

export default App;

```
```CheckField.jsx
import React from 'react';

export const CheckField = (props) => {
  // console.log(props.prefectures);
  return (
    <>
      {props.prefectures.map((prefecture) => (
        <li key={prefecture.prefName}>
          <input
            onChange={(event) =>
              props.onChange(prefecture.prefName, prefecture.prefCode, event.target.checked)
            }
            type="checkbox"
            name="pref_name"
            id={'checkbox' + prefecture.prefCode}
          />
          <label htmlFor={'checkbox' + prefecture.prefCode}>{prefecture.prefName}</label>
        </li>
      ))}
      ;
    </>
  );
};

```
```Main.jsx
import React, { useEffect, useState } from 'react';
import { CheckField } from './CheckField';

import axios from 'axios';

export const Main = () => {
  const [prefectures, setPrefectures] = useState(null);
  useEffect(() => {
    axios
      .get('https://opendata.resas-portal.go.jp/api/v1/prefectures', {
        headers: { 'X-API-KEY': process.env.REACT_APP_API_KEY },
      })
      .then((results) => {
        setPrefectures(results.data);
      });
  }, []);

  const [prefPopulation, setPrefPopulation] = useState([]);
  const onCheckField = (prefName, prefCode, check) => {
    console.log(check);
    // チェックをつけた処理
    if (check) {
      axios
        .get(
          'https://opendata.resas-portal.go.jp/api/v1/population/composition/perYear?prefCode=' +
            String(prefCode),
          {
            headers: { 'X-API-KEY': process.env.REACT_APP_API_KEY },
          },
        )
        .then((results) => {
          setPrefPopulation(results.data.result.data[0].data);
          console.log(prefPopulation);
        });
    }
    // チェックを外した処理
    else {
      setPrefPopulation([]);
    }
  };

  return (
    <main>
      <h2>都道府県</h2>
      {prefectures && <CheckField prefectures={prefectures.result} onChange={onCheckField} />}
      <h2>人口推移グラフ</h2>
    </main>
  );
};

```
現在のコードで動きを確認したのですが、よくわからない挙動になっています????????????
どなたか私のコードを修正していただけませんか？？

typescriptではなく、素のreactです。

当方、初めてSPAを作成中でなにが原因でおかしくなっているのかあまり理解できていない状況です。
よろしければコードと共に原因と解説をつけていただけますと幸いです。

どうかよろしくお願いします????‍♂️

チェックボックスをクリックすると、Resas apiから都道府県別人口の値を取得して再度、クリックすると値を削除できるようにしたい！！

プログラム初心者です。
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]
    }]

});
```