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

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

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

HighchartはHTML、SVG、VMLを使ったJavascriptの描写用ライブラリです。

JavaScript

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

Q&A

解決済

1回答

3720閲覧

Highchartsのレジェンド部分のラインカラーを変更したい

sonu

総合スコア19

Highcharts

HighchartはHTML、SVG、VMLを使ったJavascriptの描写用ライブラリです。

JavaScript

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

0グッド

0クリップ

投稿2020/06/27 09:04

https://aozora-cere-gp.sakura.ne.jp/highcharts-practice/

上記のURLは私がアップロードしたものです。そしてレジェンド部分を拡大したものが下の画像です。

イメージ説明

上の画像を見るとお分かりのとおり、レジェンド部分のラインカラーが上位血圧の場合水色だったり、体温の場合緑色だったりしますが、これを変更したいのです。

レジェンド部分の説明は、公式サイト内の
legend | highcharts
にあると思い、調べたのですが、目的のものが見当たらなくて困っている状態です。

ソースコードを下に提示します。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8" /> 5 <title>Highcharts Practice</title> 6 <!-- <link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" /> --> 7</head> 8<body> 9 <div id="container"></div><!-- / #container --> 10 11 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 12 <script src="https://code.highcharts.com/highcharts.js"></script> 13 <script src="https://code.highcharts.com/modules/data.js"></script> 14 <script src="https://code.highcharts.com/modules/series-label.js"></script> 15 <script src="https://code.highcharts.com/modules/exporting.js"></script> 16 <script src="https://code.highcharts.com/modules/export-data.js"></script> 17 <script src="https://code.highcharts.com/modules/accessibility.js"></script> 18 <!-- Additional files for the Highslide popup effect --> 19 <script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script> 20 <script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script> 21 <script src="js/index.js"></script> 22</body> 23</html>

JavaScript

1'use strict'; 2 3const date = ['5/11', '5/12', '5/13', '5/14', '5/16', '5/17', '5/18']; 4const HBP = [167, 166, 172, 163, 164, 169, 175]; 5const LBP = [98, 97, 95, 90, 89, 92, 99]; 6const KT = [35.8, 36.2, 36.3, 35.8, 36.9, 37.2, 37.8]; 7 8Highcharts.chart('container', { 9 chart: { 10 scrollablePlotArea: { 11 minWidth: 700, 12 }, 13 }, 14 15 xAxis: [ 16 { 17 categories: date, 18 } 19 ], 20 21 yAxis: [ 22 { 23 title: { 24 text: '血圧' 25 } 26 }, 27 { 28 title: { 29 text: '体温' 30 }, 31 opposite: true, 32 } 33 ], 34 35 series: [ 36 { 37 name: '上位血圧', 38 type: 'line', 39 data: HBP, 40 yAxis: 0, 41 lineColor: '#333333', 42 marker: { 43 symbol: 'url(https://aozora-cere-gp.sakura.ne.jp/images/triangle-12.png)', 44 }, 45 }, 46 { 47 name: '下位血圧', 48 type: 'line', 49 data: LBP, 50 yAxis: 0, 51 lineColor: '#333333', 52 marker: { 53 symbol: 'url(https://aozora-cere-gp.sakura.ne.jp/images/inverse-triangle-12.png)', 54 }, 55 }, 56 { 57 name: '体温', 58 type: 'line', 59 data: KT, 60 yAxis: 1, 61 lineColor: '#0000ff', 62 marker: { 63 symbol: 'url(https://aozora-cere-gp.sakura.ne.jp/images/KT-12.png)' 64 }, 65 }, 66 ], 67 68 legend: { 69 lineColor: '#FF0000', 70 }, 71});

お分かりの方、ご教授お願いできないでしょうか。

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

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

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

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

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

m.ts10806

2020/06/27 11:25

CSS部分の無効化はどういう意図があるのでしょう? legendのlineColorでは反映されなかったのでしょうか? もう少し具体的に「試したこと」を記載してください。
guest

回答1

0

ベストアンサー

HighchartsのAPIリファレンスを見たところ、seriesの色(lineなら線の色)は、lineColorではなく、colorで指定すると書いてあります。そして実際、そうすると凡例の表示も自動的に追従します。凡例のほうで何かを設定する必要はありません。

series.line.color | highcharts API Reference

ということで、JavaScriptの各seriesのlineColorcolorに変更してください。

投稿2020/06/27 12:04

Daregada

総合スコア11990

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

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

sonu

2020/06/28 00:53

出来ました! ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問