HTMLで作成したグラフについて質問致します。インターネット上にある複合グラフのサンプルをダウンロードして自分でグラフを作成したいと思いHTMLの中身の編集しました。1ヶ月間のデータ朝計60個を入れたグラフは無事完成しました。そしてそのHTMLを更に編集して朝と夜のグラフ化したいと思いデータ入力編集致しました。しかしそのHTMLを実行すると何も表示されなくなりました。HTMLのどの部分がいけないのかまたは何が足りないのかHTMLに詳しい方にプログラム編集していただきたくご伝授をお願い致します。データhttps://docs.google.com/spreadsheets/d/1FbmP-myvhx07hF-AQK37VxZsYZgiSpZD/edit?usp=drivesdk\u0026amp;ouid=116142145746862708499\u0026amp;rtpof=true\u0026amp;sd=trueグラフ試しに作成してみたHTMLhttps://drive.google.com/file/d/1W34NpWcOSP8zvbT1-o4EV2DOZrZDLpTS/view?usp=drivesdk更に編集してみたHTMLhttps://drive.google.com/file/d/1v7vXNSjJuMI4_n7Z_zgXVyys1R_wNaVD/view?usp=drivesdk表示不可となった。完成予想グラフ ↓

abe358534さん



\u0026gt;･･･そのHTMLを実行すると何も表示されなくなりました。･･･････



１．原因は、

datasets: [～]

の記述がおかしいです。



２．敢えてそれを書くなら、下記５.の様になります。



３．それが解決しても、データの中に、値 0のバーを追加すると、添付図のように変な間隔が出来てしまうのでお勧めできません。



４．個別にバーの色割れが出来るなら、朝夜連続のデータにして色分けだけで朝夜の区別した良いのではないですか。



５．修正したコード。ご参考に↓



\u0026lt;!DOCTYPE html\u0026gt;

\u0026lt;html lang=“ja”\u0026gt;

\u0026lt;head\u0026gt;

\u0026lt;meta http-equiv=\u0026quot;content-language\u0026quot; content=\u0026quot;ja\u0026quot;\u0026gt;

\u0026lt;meta name=\u0026quot;robots\u0026quot; content=\u0026quot;noindex,nofollow\u0026quot;\u0026gt;

\u0026lt;meta charset=\u0026quot;UTF-8\u0026quot;\u0026gt;

\u0026lt;script src=\u0026quot;https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;

\u0026lt;title\u0026gt;HTML Sample\u0026lt;/title\u0026gt;

\u0026lt;/head\u0026gt;

\u0026lt;body\u0026gt;

\u0026lt;canvas id=\u0026quot;myChart\u0026quot; width=\u0026quot;600\u0026quot; height=\u0026quot;200\u0026quot;\u0026gt;\u0026lt;/canvas\u0026gt;



\u0026lt;script\u0026gt;

var ctx = document.getElementById(\u0026quot;myChart\u0026quot;);

var myChart = new Chart(ctx, {

type: 'bar',

data: {

labels: [\u0026quot;9/1AM\u0026quot;, \u0026quot;9/1PM\u0026quot;, \u0026quot;9/2AM\u0026quot;, \u0026quot;9/2PM\u0026quot;, \u0026quot;9/3AM\u0026quot;, \u0026quot;9/3PM\u0026quot;, \u0026quot;9/4AM\u0026quot;, \u0026quot;9/4PM\u0026quot;, \u0026quot;9/5AM\u0026quot;, \u0026quot;9/5PM\u0026quot;, \u0026quot;9/6AM\u0026quot;, \u0026quot;9/6PM\u0026quot;, \u0026quot;9/7AM\u0026quot;, \u0026quot;9/7PM\u0026quot;, \u0026quot;9/8AM\u0026quot;, \u0026quot;9/8PM\u0026quot;, \u0026quot;9/9AM\u0026quot;, \u0026quot;9/9PM\u0026quot;, \u0026quot;9/10AM\u0026quot;, \u0026quot;9/10PM\u0026quot;, \u0026quot;9/11AM\u0026quot;, \u0026quot;9/11PM\u0026quot;, \u0026quot;9/12AM\u0026quot;, \u0026quot;9/12PM\u0026quot;, \u0026quot;9/13AM\u0026quot;, \u0026quot;9/13PM\u0026quot;, \u0026quot;9/14AM\u0026quot;, \u0026quot;9/14PM\u0026quot;, \u0026quot;9/15AM\u0026quot;, \u0026quot;9/15PM\u0026quot;, \u0026quot;9/16AM\u0026quot;, \u0026quot;9/16PM\u0026quot;, \u0026quot;9/17AM\u0026quot;, \u0026quot;9/17PM\u0026quot;, \u0026quot;9/18AM\u0026quot;, \u0026quot;9/18PM\u0026quot;, \u0026quot;9/19AM\u0026quot;, \u0026quot;9/19PM\u0026quot;, \u0026quot;9/20AM\u0026quot;, \u0026quot;9/20PM\u0026quot;, \u0026quot;9/21AM\u0026quot;, \u0026quot;9/21PM\u0026quot;, \u0026quot;9/22AM \u0026quot;, \u0026quot;9/22PM\u0026quot;, \u0026quot;9/23AM\u0026quot;, \u0026quot;9/23PM\u0026quot;, \u0026quot;9/24AM\u0026quot;, \u0026quot;9/24PM\u0026quot;, \u0026quot;9/25AM\u0026quot;, \u0026quot;9/25PM\u0026quot;, \u0026quot;9/26AM\u0026quot;, \u0026quot;9/26PM\u0026quot;, \u0026quot;9/27AM\u0026quot;, \u0026quot;9/27PM\u0026quot;, \u0026quot;9/28AM\u0026quot;, \u0026quot;9/28PM\u0026quot;, \u0026quot;9/29AM\u0026quot;, \u0026quot;9/29PM\u0026quot;, \u0026quot;9/30AM\u0026quot;, \u0026quot;9/30PM\u0026quot;],

datasets: [{

type: 'bar',

label: '朝血圧',

data:[70,0,66,0,64,0,68,0,70,0,78,0,76,0,77,0,79,0,75,0,63,0,77,0,74,0,68,0,74,0,71,0,67,0,70,0,64,0,70,0,78,0,75,0,73,0,74,0,70,0,73,0,64,0,61,0,64,0,72,0],

backgroundColor: 'rgb(54, 162, 235, 0.3)',

borderColor: 'rgb(54, 162, 235, 0.1)',

borderWidth: 1,

stack: 1

},

{

type: 'bar',

label: '朝血圧2',

data: [44,0,43,0,45,0,38,0,41,0,41,0,43,0,48,0,37,0,29,0,46,0,28,0,34,0,46,0,37,0,45,0,33,0,38,0,46,0,52,0,37,0,41,0,41,0,40,0,43,0,35,0,22,0,59,0,39,0,47,0],

borderColor: 'rgba(255, 99, 132, 0.2)',

backgroundColor: 'rgba(55, 199, 232, 0.8)',

borderWidth: 1,

stack: 1

},

/* 削除

datasets: [*/

{

type: 'bar',

label: '夜血圧',

data: [0,72,0,75,0,75,0,66,0,71,0,77,0,71,0,72,0,79,0,67,0,75,0,72,0,70,0,73,0,63,0,77,0,74,0,72,0,72,0,71,0,75,0,72,0,65,0,72,0,76,0,57,0,75,0,72,0,77,0,74],

borderColor: 'rgba(64, 162, 235, 0.2)',

backgroundColor: 'rgba(164, 255, 35, 0.2)',

borderWidth: 1,

stack: 2

},

{

type: 'bar',

label: '夜血圧2',

data: [0,35,0,26,0,26,0,34,0,53,0,29,0,30,0,38,0,32,0,43,0,46,0,38,0,41,0,24,0,35,0,30,0,31,0,25,0,41,0,31,0,41,0,30,0,36,0,42,0,29,0,42,0,24,0,28,0,25,0,34],

borderColor: 'rgba(255, 99, 132, 0.2)',

backgroundColor: 'rgba(255, 199, 132, 0.9)',

borderWidth: 1,

stack: 2

},

{

type: 'line',

label: \u0026quot;脈拍\u0026quot;,

backgroundColor: 'rgb(255, 99, 132)',

borderColor: 'rgb(255, 99, 132)',

// 線の幅(ピクセル単位)

borderWidth: 0,

// 線のベジェ曲線の張力。直線を描くには0に設定する。

lineTension: 0.5,

// 点の形状の半径。0に設定すると、点はレンダリングされない。

pointRadius: 3,

// マウスオーバー検出のために点半径に追加される半径(ピクセル単位)

pointHitRadius: 3,

// 線の下を埋めるかどうか

fill: false,

data: [78,80,76,93,77,93,81,77,64,92,80,85,74,75,79,75,78,83,87,89,80,78,75,78,78,89,87,137,61,92,89,96,84,77,93,75,84,85,73,77,82,80,80,76,71,81,82,91,64,73,80,91,94,85,84,85,86,105,77,85],

}]

},

options: {

scales: {

y: {

stacked: true

}

}

}

});

\u0026lt;/script\u0026gt;

\u0026lt;/body\u0026gt;

\u0026lt;/html\u0026gt;