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

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

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

682閲覧

char.jsのレーダーチャート

zynu

総合スコア29

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/10/16 12:26

chart.jsを使ってレーダーチャートを作っているのですが、上手くいきません。
サイズを height,width:400pxで指定したいです。どなたか教えてください。

HTML

<section class="container-s"> <div class="chart" style="position: relative; height:400; width:400"> <canvas id="myChart" width=“300px” height=“300px”></canvas> </div> </section>

JavaScript

// 色の設定
var colorSet = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)',
brack: "rgb(0,0,0)"
};

// 乱数生成(0~100)
var rnd100 = function(){
return Math.round(Math.random() * 100);
};

// 色のRGB変換
var color = Chart.helpers.color;

/*

  • チャートの初期設定

*/
var config = {
type: 'radar',
data: {
labels: ["HTML", "CSS", "JavaScript", "jQuery", "WordPress", "PHP"],
datasets: [{
backgroundColor: color(colorSet.red).alpha(0.5).rgbString(),
borderColor: colorSet.red,
pointBackgroundColor: colorSet.red,
data: [3, 3, 2, 2, 1, 1]
},]
},
options: {
animation:false,
showTooltips: false,
legend: { position: 'bottom' },
scale: {
display: true,
pointLabels: {
fontSize: 15,
fontColor: colorSet.black
},
ticks: {
display: true,
fontSize: 12,
fontColor: colorSet.green,
min: 0,
max: 4,
beginAtZero: true
},
gridLines: {
display: true,
color: colorSet.grey
}
}
}
};

var myRadar = new Chart($("#myChart"), config);

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

<div class="chart" style="position: relative; height:400; width:400"> ________________ **↑**ここが全角スペースになっている

半角スペースにしてください

<canvas id="myChart" width=“300px” height=“300px”></canvas>

“300px” “300px”
全角 ダブルクォーテーションになっている
半角にしてください

投稿2019/10/17 02:20

date

総合スコア1820

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zynu

2019/10/18 08:38

ありがとうございます。 そこと、javaに $('#myChart').removeAttr("style"); の記述を足すことで解決しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問