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});
お分かりの方、ご教授お願いできないでしょうか。
回答1件
あなたの回答
tips
プレビュー