走行ごとの安全運転スコアについて、点数区分（「59点以下」「60～79点」「80点以上」）ごとの回数と割合を確認できます。
運転分保険料80％割引を目指して、安全運転を継続してください。
マンスリー[グラフ]
マンスリーレポートのグラフについての章です。
コンテンツエリア毎のラッピング
各コンテンツエリアは「t-monthly」クラスを付与したタグで囲ってください。
<div class="t-monthly">
<!-- 各コンテンツが入ります -->
</div>
総合評価
総合評価は「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。（※関連ファイル：jquery-3.4.1.min.js、circliful.js、circliful.css）
星の数を変更することができます「★１：star_img01.png」「★２：star_img02.png」「★３：star_img03.png」
総合評価
点
<body>
<section class="t-container">
<div class="t-monthly">
<div class="t-monthly-circle">
<div class="t-monthly-circle-charts">
<div class="t-monthly-circle-charts-title">総合評価</div>
<div id="hyouka-circle"></div>
<div class="t-monthly-circle-charts-text">点</div>
</div><!-- /.t-monthly-circle-charts -->
<div class="t-monthly-cercle-image"><img src="images/monthly/star_img03.png" alt=""></div>
</div><!-- /.t-monthly-circle -->
</div><!-- /.t-monthly -->
</section>
</body>
総合評価：円グラフの設定
円グラフの設定は「var totalPoint = ●●;」の「●●」に数値（0から100）を設定してください。
<body>
<script type="text/javascript">
$(window).on('load', function(){
// 総合評価
var totalPoint = 95;
var circle1 = circliful.newCircle({
id: 'hyouka-circle',
type: 'simple',
percent: totalPoint,
strokeGradient: ["#00d2ff", "#0064ff"],
animationStep: 8,
backgroundCircleWidth: 20,
foregroundCircleWidth: 20,
noPercentageSign: true,
});
});
</script>
</body>
保険料推移 - ご請求保険料・運転分保険料
ご請求保険料・運転分保険料は「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。
（※関連ファイル：Chart.min.js、shift-a.js、shift-da.js）
保険料推移
- ご請求保険料
- 運転分保険料
/
- 各月のグラフを押すと、安全運転お得額やご請求保険料の詳細をご覧いただけます。
ご請求保険料
安全運転お得額
ご請求保険料
安全運転お得額
<body>
<section class="t-container">
<div class="t-monthly">
<div class="t-monthly-content">
<div class="t-monthly-content-item active">
<div class="t-monthly-content-header">
<div class="t-monthly-content-icon"><img src="images/monthly/ico07.png" alt=""></div>
<h4 class="t-monthly-content-title">保険料推移</h4>
</div><!-- /.t-monthly-content-header -->
<div class="t-monthly-content-shift">
<div class="t-block">
<div id="graph-a" class="t-monthly-content-shift-block">
<ul id="chart-switch" class="t-monthly-content-shift-nav">
<li id="chart-switch-01" class="t-monthly-content-shift-nav-item active">ご請求保険料</li>
<li id="chart-switch-02" class="t-monthly-content-shift-nav-item">運転分保険料</li>
</ul>
<div class="t-monthly-content-shift-item">
<div class="t-monthly-content-shift-item-graph">
<form name="form1">
<!-- ご請求保険料 -->
<div class="h_canvas_wrap active">
<canvas id="canvas_h11"></canvas>
</div><!-- /.h_canvas_wrap -->
<div class="d_canvas_wrap">
<canvas id="canvas_d11"></canvas>
</div><!-- /.d_canvas_wrap -->
<div class="t-monthly-content-shift-legend">
<div class="t-monthly-content-shift-legend-item">
<div class="t-monthly-content-shift-legend-payparins">運転分保険料</div>
</div><!-- /.t-monthly-content-shift-legend-item -->
<div class="t-monthly-content-shift-legend-item">
<div class="t-monthly-content-shift-legend-discountins">安全運転お得額</div>
</div><!-- /.t-monthly-content-shift-legend-item -->
<div class="t-monthly-content-shift-legend-item">
<div class="t-monthly-content-shift-legend-mileage">走行距離</div>
</div><!-- /.t-monthly-content-shift-legend-item -->
</div><!-- /.t-monthly-content-shift-legend -->
</form>
</div><!-- /.t-monthly-content-shift-item-graph -->
<div class="t-monthly-content-shift-item-button">
<div class="t-monthly-content-shift-item-button-icon">
<div id="chart-kako">
<div id="chart-paging-prev"><img src="images/monthly/btn02.png" alt="Prev"></div>
<div class="chart-paging-this"></div>
<div class="chart-paging-sprit">/</div>
<div class="chart-paging-all"></div>
<div id="chart-paging-next"><img src="images/monthly/btn01.png" alt="Next"></div>
</div>
</div>
</div><!-- /.t-monthly-content-shift-item-button -->
</div><!-- /.t-monthly-content-shift-item -->
<ul class="t-annotation">
<li class="t-annotation-item">各月のグラフを押すと、安全運転お得額やご請求保険料の詳細をご覧いただけます。</li>
</ul>
</div><!-- /.t-monthly-content-shift-block -->
</div><!-- /.t-block -->
</div><!-- /.t-monthly-content-shift -->
</div><!-- /.t-monthly-content-item -->
</div><!-- /.t-monthly-content -->
<div id="shift-a-modal" class="shift-a-modal">
<div class="t-modal-inner">
<div class="t-modal-scroll">
<div class="modal-card">
<div class="modal-card-title">
<div class="modal-card-title-header">
<div id="ins_month" class="modal-card-text"></div>
</div><!-- /.modal-card-title-header -->
<span class="btn-close modal-card-close" onclick="dismissModal()">
<span class="modal-card-close-icon"></span>
</span>
</div><!-- /.modal-card-title -->
<div class="modal-card-header">
<div class="modal-card-header-block">
<div class="modal-card-header-title">ご請求保険料</div>
<div id="sum_ins" class="modal-card-table-yen"></div>
</div>
<div class="modal-card-message">
<div class="modal-card-message-text"></div>
</div>
</div><!-- /.modal-card-header -->
<div class="modal-card-body">
<div class="modal-card-body-block">
<div class="modal-card-table">
<div class="modal-card-table-row">
<div class="modal-card-table-cell">
<label>基本保険料</label>
</div>
<div class="modal-card-table-cell">
<label id="basic_ins" class="modal-card-table-yen"></label>
</div>
</div><!-- /.modal-card-table-row -->
<div class="modal-card-table-row">
<div class="modal-card-table-cell">
<label>運転分保険料</label>
</div>
<div class="modal-card-table-cell">
<label id="pay_par_ins" class="modal-card-table-yen"></label>
</div>
</div><!-- /.modal-card-table-row -->
</div><!-- /.modal-card-table -->
<div class="modal-card-otoku">
<div class="modal-card-otoku-title">安全運転お得額</div>
<div class="modal-card-otoku-block">
<label>▲</label>
<div id="discount_ins_clone" class="modal-card-table-yen"></div>
</div><!-- /.modal-card-otoku-block -->
</div><!-- /.modal-card-otoku -->
<div class="modal-card-result">
<div class="modal-card-result-block">
<div class="modal-card-result-item">
<div class="modal-card-result-item-header">
<div class="modal-card-result-item-title">
<div class="modal-card-result-item-icon t-icon-distance">走行距離</div>
</div>
</div><!-- /.modal-card-result-item-header -->
<div class="modal-card-result-item-body">
<div class="modal-card-result-item-body-inner">
<div class="modal-card-result-item-text">
<label id="mileage" class="modal-card-table-km"></label>
<div class="modal-card-result-item-add">
<div class="modal-card-result-item-add-text">
<label id="autodrive_mileage" class="modal-card-table-autodrive"></label>
</div>
</div><!-- /.modal-card-result-item-add -->
</div><!-- /.modal-card-result-item-text -->
</div><!-- /.modal-card-result-item-body-inner -->
</div><!-- /.modal-card-result-item-body -->
</div><!-- /.modal-card-result-item -->
<div class="modal-card-result-item">
<div class="modal-card-result-item-header">
<div class="modal-card-result-item-title">
<div class="modal-card-result-item-icon t-icon-stars">総合評価</div>
</div>
</div><!-- /.modal-card-result-item-header -->
<div class="modal-card-result-item-body">
<div class="modal-card-result-item-body-inner">
<div class="modal-card-result-item-text">
<label id="score" class="modal-card-table-point"></label>
</div><!-- /.modal-card-result-item-text -->
</div><!-- /.modal-card-result-item-body-inner -->
</div><!-- /.modal-card-result-item-body -->
</div><!-- /.modal-card-result-item -->
</div><!-- /.modal-card-result-block -->
</div><!-- /.modal-card-result -->
</div><!-- /.modal-card-body-block -->
</div><!-- /.modal-card-body -->
<div class="modal-card-footer t-bg-blue">
<div class="modal-card-annualinfo">
<div class="modal-card-annualinfo-header">
<div class="modal-card-annualinfo-header-title">年間合計運転分保険料</div>
</div><!-- /.modal-card-annualinfo-header -->
<div class="modal-card-annualinfo-body">
<div class="modal-card-annualinfo-body-header">
<div class="modal-card-annualinfo-body-header-title">ご請求保険料</div>
<div id="yearly_sum_ins" class="modal-card-annualinfo-body-header-price"></div>
</div><!-- /.modal-card-annualinfo-body-header -->
<div class="modal-card-annualinfo-body-item">
<div class="modal-card-annualinfo-body-item-title">年間合計運転分保険料</div>
<div id="yearly_pay_par_ins" class="modal-card-annualinfo-body-item-price"></div>
</div><!-- /.modal-card-annualinfo-body-item -->
<div class="modal-card-annualinfo-body-deals">
<div class="modal-card-annualinfo-body-deals-title">年間合計安全運転お得額</div>
<div class="modal-card-annualinfo-body-deals-price-icon">▲</div>
<div id="yearly_discount_ins" class="modal-card-annualinfo-body-deals-price"></div>
</div><!-- /.modal-card-annualinfo-body-deals -->
<div class="modal-card-annualinfo-body-mileage">
<div class="modal-card-annualinfo-body-mileage-title">年間走行距離</div>
<div id="yearly_mileage" class="modal-card-annualinfo-body-mileage-km"></div>
<div class="modal-card-annualinfo-body-mileage-add">
<label id="yearly_autodrive_mileage" class="modal-card-annualinfo-body-mileage-add-text"></label>
</div>
</div><!-- /.modal-card-annualinfo-body-mileage -->
</div><!-- /.modal-card-annualinfo-body -->
</div><!-- /.modal-card-annualinfo -->
</div><!-- /.modal-card-footer -->
</div><!-- /.modal-card -->
</div><!-- /.t-modal-scroll -->
</div><!-- /.t-modal-inner -->
<div class="black-background" onclick="dismissModal()"></div>
</div><!-- /.modal -->
<div id="shift-da-modal" class="shift-da-modal">
<div class="t-modal-inner">
<div class="t-modal-scroll">
<div class="modal-card">
<div class="modal-card-title">
<div class="modal-card-title-header">
<div id="drive_ins_month" class="modal-card-text"></div>
</div><!-- /.modal-card-title-header -->
<span class="btn-close modal-card-close" onclick="dismissDriveModal()">
<span class="modal-card-close-icon"></span>
</span>
</div><!-- /.modal-card-title -->
<div class="modal-card-header">
<div class="modal-card-header-title">ご請求保険料</div>
<div id="drive_sum_ins" class="modal-card-table-yen"></div>
<div class="modal-card-message">
<div class="modal-card-message-text"></div>
</div>
</div><!-- /.modal-card-header -->
<div class="modal-card-body">
<div class="modal-card-body-block">
<div class="modal-card-table">
<div class="modal-card-table-row">
<div class="modal-card-table-cell">
<label>基本保険料</label>
</div>
<div class="modal-card-table-cell">
<label id="drive_basic_ins" class="modal-card-table-yen"></label>
</div>
</div><!-- /.modal-card-table-row -->
<div class="modal-card-table-row">
<div class="modal-card-table-cell">
<label>運転分保険料</label>
</div>
<div class="modal-card-table-cell">
<label id="drive_pay_par_ins" class="modal-card-table-yen"></label>
</div>
</div><!-- /.modal-card-table-row -->
</div><!-- /.modal-card-table -->
<div class="modal-card-otoku">
<div class="modal-card-otoku-title">安全運転お得額</div>
<div class="modal-card-otoku-block">
<label>▲</label>
<div id="drive_discount_ins_clone" class="modal-card-table-yen"></div>
</div><!-- /.modal-card-otoku-block -->
</div><!-- /.modal-card-otoku -->
<div class="modal-card-result">
<div class="modal-card-result-block">
<div class="modal-card-result-item">
<div class="modal-card-result-item-header">
<div class="modal-card-result-item-title">
<div class="modal-card-result-item-icon t-icon-distance">走行距離</div>
</div>
</div><!-- /.modal-card-result-item-header -->
<div class="modal-card-result-item-body">
<div class="modal-card-result-item-body-inner">
<div class="modal-card-result-item-text">
<label id="drive_mileage" class="modal-card-table-km"></label>
<div class="modal-card-result-item-add">
<div class="modal-card-result-item-add-text">
<label id="drive_autodrive_mileage" class="modal-card-table-autodrive"></label>
</div>
</div><!-- /.modal-card-result-item-add -->
</div><!-- /.modal-card-result-item-text -->
</div><!-- /.modal-card-result-item-body-inner -->
</div><!-- /.modal-card-result-item-body -->
</div><!-- /.modal-card-result-item -->
<div class="modal-card-result-item">
<div class="modal-card-result-item-header">
<div class="modal-card-result-item-title">
<div class="modal-card-result-item-icon t-icon-stars">総合評価</div>
</div>
</div><!-- /.modal-card-result-item-header -->
<div class="modal-card-result-item-body">
<div class="modal-card-result-item-body-inner">
<div class="modal-card-result-item-text">
<label id="drive_score" class="modal-card-table-point"></label>
</div><!-- /.modal-card-result-item-text -->
</div><!-- /.modal-card-result-item-body-inner -->
</div><!-- /.modal-card-result-item-body -->
</div><!-- /.modal-card-result-item -->
</div><!-- /.modal-card-result-block -->
</div><!-- /.modal-card-result -->
</div><!-- /.modal-card-body-block -->
</div><!-- /.modal-card-body -->
<div class="modal-card-footer t-bg-blue">
<div class="modal-card-annualinfo">
<div class="modal-card-annualinfo-header">
<div class="modal-card-annualinfo-header-title">年間合計運転分保険料</div>
</div><!-- /.modal-card-annualinfo-header -->
<div class="modal-card-annualinfo-body">
<div class="modal-card-annualinfo-body-header">
<div class="modal-card-annualinfo-body-header-title">ご請求保険料</div>
<div id="drive_yearly_sum_ins" class="modal-card-annualinfo-body-header-price"></div>
</div><!-- /.modal-card-annualinfo-body-header -->
<div class="modal-card-annualinfo-body-item">
<div class="modal-card-annualinfo-body-item-title">年間合計運転分保険料</div>
<div id="drive_yearly_pay_par_ins" class="modal-card-annualinfo-body-item-price"></div>
</div><!-- /.modal-card-annualinfo-body-item -->
<div class="modal-card-annualinfo-body-deals">
<div class="modal-card-annualinfo-body-deals-title">年間合計安全運転お得額</div>
<div class="modal-card-annualinfo-body-deals-price-icon">▲</div>
<div id="drive_yearly_discount_ins" class="modal-card-annualinfo-body-deals-price"></div>
</div><!-- /.modal-card-annualinfo-body-deals -->
<div class="modal-card-annualinfo-body-mileage">
<div class="modal-card-annualinfo-body-mileage-title">年間走行距離</div>
<div id="drive_yearly_mileage" class="modal-card-annualinfo-body-mileage-km"></div>
<div class="modal-card-annualinfo-body-mileage-add">
<label id="drive_yearly_autodrive_mileage" class="modal-card-annualinfo-body-mileage-add-text"></label>
</div>
</div><!-- /.modal-card-annualinfo-body-mileage -->
</div><!-- /.modal-card-annualinfo-body -->
</div><!-- /.modal-card-annualinfo -->
</div><!-- /.modal-card-footer -->
</div><!-- /.modal-card -->
</div><!-- /.t-modal-scroll -->
</div><!-- /.t-modal-inner -->
<div class="black-background" onclick="dismissDriveModal()"></div>
</div><!-- /.modal -->
</div><!-- /.t-monthly -->
</section>
</body>
保険料推移 - 運転分保険料・請求保険料：グラフの設定
年払いの仕様に変更する場合はpaymentTypeの値を「yearly」に変更してください。
【データセット】
| message | modalMessage の内容を追加メッセージとして表示します |
|---|---|
| labels | 年月の設定 |
| basicIns | 基本保険料 |
| payParIns | 運転分保険料 |
| discountIns | 割引保険料 |
| score | スコア |
| mileage | 走行距離 |
| autodrive_mileage | 自動運転走行 |
| sumIns | ご請求保険料 |
| yearlySumIns | 年間ご請求保険料 |
| yearlyPayParIns | 年間合計運転分保険料 |
| yearlyDiscountIns | 年間合計安全運転お得額 |
| yearlyMileage | 年間走行距離 |
| yearlyAutodriveMileage | 年間自動運転走行 |
各グラフの設定は下記を参考に記述してください。
<body>
<script type="text/javascript">
$(window).on('load', function(){
// 通常・年払い：識別フラグ（monthly or yearly）
paymentType = "monthly";
// メッセージ設定
modalMessage = [
"※運転分保険料は翌月以降に発生します。",
"※運転分保険料は翌月以降に発生し、一年間の合計額をまとめてご請求します。",
"※運転分保険料は翌々月以降に発生します。",
"※お支払サイクルが変更となりましたので基本保険料を2回分あわせてご請求します。"
];
// 通常
// ご請求保険料
var graph_data_a = [
{ /* 直近6ヶ月 */
message : [, 0, 1, 2, 3, ],
labels : ["2020年9月", "2020年10月", "2020年11月", "2020年12月", "2021年1月", "2021年2月"],
basicIns : [14720, 5000, 60000, 5000, 10001, ],
payParIns : [280, , , , 1005, ],
discountIns : [190, , , , 170, ],
score : [77, , , , 75, ],
mileage : [166, , , , 1000, ],
autodrive_mileage: [99999, 99999, 99999, 99999, 99999, 99999],
sumIns : [15000, 5000, 60000, 5000, 11006, ],
yearlySumIns : [, , , , , ],
yearlyPayParIns : [, , , , , ],
yearlyDiscountIns: [, , , , , ],
yearlyMileage : [, , , , , ],
yearlyAutodriveMileage: [, , , , , ],
},
{ /* 過去1 */
message : [, 0, 1, 2, 3, ],
labels : ["2020年3月", "2020年4月", "2020年5月", "2020年6月", "2020年7月", "2020年8月"],
basicIns : [14720, 5000, 60000, 5000, 10001, ],
payParIns : [280, , , , 1005, ],
discountIns : [190, , , , 170, ],
score : [77, , , , 75, ],
mileage : [166, , , , 1000, ],
autodrive_mileage: [99999, 99999, 99999, 99999, 99999, 99999],
sumIns : [15000, 5000, 60000, 5000, 11006, ],
yearlySumIns : [, , , , , ],
yearlyPayParIns : [, , , , , ],
yearlyDiscountIns: [, , , , , ],
yearlyMileage : [, , , , , ],
yearlyAutodriveMileage: [, , , , , ],
},
{ /* 過去2 */
message : [, 0, 1, 2, 3, ],
labels : ["2019年9月", "2019年10月", "2019年11月", "2019年12月", "2020年1月", "2020年2月"],
basicIns : [14720, 5000, 60000, 5000, 10001, ],
payParIns : [280, , , , 1005, ],
discountIns : [190, , , , 170, ],
score : [77, , , , 75, ],
mileage : [166, , , , 1000, ],
autodrive_mileage: [99999, 99999, 99999, 99999, 99999, 99999],
sumIns : [15000, 5000, 60000, 5000, 11006, ],
yearlySumIns : [, , , , , ],
yearlyPayParIns : [, , , , , ],
yearlyDiscountIns: [, , , , , ],
yearlyMileage : [, , , , , ],
yearlyAutodriveMileage: [, , , , , ],
},
{ /* 過去3 */
message : [, 0, 1, 2, 3, ],
labels : ["2019年3月", "2019年4月", "2019年5月", "2019年6月", "2019年7月", "2019年8月"],
basicIns : [14720, 5000, 60000, 5000, 10001, ],
payParIns : [280, , , , 1005, ],
discountIns : [190, , , , 170, ],
score : [77, , , , 75, ],
mileage : [166, , , , 1000, ],
autodrive_mileage: [99999, 99999, 99999, 99999, 99999, 99999],
sumIns : [15000, 5000, 60000, 5000, 11006, ],
yearlySumIns : [, , , , , ],
yearlyPayParIns : [, , , , , ],
yearlyDiscountIns: [, , , , , ],
yearlyMileage : [, , , , , ],
yearlyAutodriveMileage: [, , , , , ],
},
{ /* 過去4 */
message : [, 0, 1, 2, 3, ],
labels : ["2018年9月", "2018年10月", "2018年11月", "2018年12月", "2019年1月", "2019年2月"],
basicIns : [14720, 5000, 60000, 5000, 10001, ],
payParIns : [280, , , , 1005, ],
discountIns : [190, , , , 170, ],
score : [77, , , , 75, ],
mileage : [166, , , , 1000, ],
autodrive_mileage: [99999, 99999, 99999, 99999, 99999, 99999],
sumIns : [15000, 5000, 60000, 5000, 11006, ],
yearlySumIns : [, , , , , ],
yearlyPayParIns : [, , , , , ],
yearlyDiscountIns: [, , , , , ],
yearlyMileage : [, , , , , ],
yearlyAutodriveMileage: [, , , , , ],
},
{ /* 過去5 */
message : [, 0, 1, 2, 3, ],
labels : ["2018年3月", "2018年4月", "2018年5月", "2018年6月", "2018年7月", "2018年8月"],
basicIns : [14720, 5000, 60000, 5000, 10001, ],
payParIns : [280, , , , 1005, ],
discountIns : [190, , , , 170, ],
score : [77, , , , 75, ],
mileage : [166, , , , 1000, ],
autodrive_mileage: [99999, 99999, 99999, 99999, 99999, 99999],
sumIns : [15000, 5000, 60000, 5000, 11006, ],
yearlySumIns : [, , , , , ],
yearlyPayParIns : [, , , , , ],
yearlyDiscountIns: [, , , , , ],
yearlyMileage : [, , , , , ],
yearlyAutodriveMileage: [, , , , , ],
},
{ /* 過去6 */
message : [, 0, 1, 2, 3, ],
labels : ["2017年9月", "2017年10月", "2017年11月", "2017年12月", "2018年1月", "2018年2月"],
basicIns : [14720, 5000, 60000, 5000, 10001, ],
payParIns : [280, , , , 1005, ],
discountIns : [190, , , , 170, ],
score : [77, , , , 75, ],
mileage : [166, , , , 1000, ],
autodrive_mileage: [99999, 99999, 99999, 99999, 99999, 99999],
sumIns : [15000, 5000, 60000, 5000, 11006, ],
yearlySumIns : [, , , , , ],
yearlyPayParIns : [, , , , , ],
yearlyDiscountIns: [, , , , , ],
yearlyMileage : [, , , , , ],
yearlyAutodriveMileage: [, , , , , ],
},
{ /* 過去7 */
message : [, 0, 1, 2, 3, ],
labels : ["2017年3月", "2017年4月", "2017年5月", "2017年6月", "2017年7月", "2017年8月"],
basicIns : [14720, 5000, 60000, 5000, 10001, ],
payParIns : [280, , , , 1005, ],
discountIns : [190, , , , 170, ],
score : [77, , , , 75, ],
mileage : [166, , , , 1000, ],
autodrive_mileage: [99999, 99999, 99999, 99999, 99999, 99999],
sumIns : [15000, 5000, 60000, 5000, 11006, ],
yearlySumIns : [, , , , , ],
yearlyPayParIns : [, , , , , ],
yearlyDiscountIns: [, , , , , ],
yearlyMileage : [, , , , , ],
yearlyAutodriveMileage: [, , , , , ],
},
{ /* 過去8 */
message : [, 0, 1, 2, 3, ],
labels : ["2016年9月", "2016年10月", "2016年11月", "2016年12月", "2017年1月", "2017年2月"],
basicIns : [14720, 5000, 60000, 5000, 10001, ],
payParIns : [280, , , , 1005, ],
discountIns : [190, , , , 170, ],
score : [77, , , , 75, ],
mileage : [166, , , , 1000, ],
autodrive_mileage: [99999, 99999, 99999, 99999, 99999, 99999],
sumIns : [15000, 5000, 60000, 5000, 11006, ],
yearlySumIns : [, , , , , ],
yearlyPayParIns : [, , , , , ],
yearlyDiscountIns: [, , , , , ],
yearlyMileage : [, , , , , ],
yearlyAutodriveMileage: [, , , , , ],
},
{ /* 過去9 */
message : [, 0, 1, 2, 3, ],
labels : ["2016年3月", "2016年4月", "2016年5月", "2016年6月", "2016年7月", "2016年8月"],
basicIns : [14720, 5000, 60000, 5000, 10001, ],
payParIns : [280, , , , 1005, ],
discountIns : [190, , , , 170, ],
score : [77, , , , 75, ],
mileage : [166, , , , 1000, ],
autodrive_mileage: [99999, 99999, 99999, 99999, 99999, 99999],
sumIns : [15000, 5000, 60000, 5000, 11006, ],
yearlySumIns : [, , , , , ],
yearlyPayParIns : [, , , , , ],
yearlyDiscountIns: [, , , , , ],
yearlyMileage : [, , , , , ],
yearlyAutodriveMileage: [, , , , , ],
}
];
canvas_ins(graph_data_a);
// 運転分保険料
var graph_data_da = [
{ /* 直近6ヶ月 */
message : [0, 1, 2, 3, , ],
labels : ["2020年9月", "2020年10月", "2020年11月", "2020年12月", "2021年1月", "2021年2月"],
basicIns : [14720, 5000, 60000, 5000, 10001, ],
payParIns : [280, , , , 1005, ],
discountIns : [190, , , , 170, ],
score : [77, , , , 75, ],
mileage : [166, , , , 1000, ],
autodrive_mileage: [99999, 99999, 99999, 99999, 99999, 99999],
sumIns : [15000, 5000, 60000, 5000, 11006, ],
yearlySumIns : [, , , , , ],
yearlyPayParIns : [, , , , , ],
yearlyDiscountIns: [, , , , , ],
yearlyMileage : [, , , , , ],
yearlyAutodriveMileage: [, , , , , ],
},
{ /* 過去1 */
message : [0, 1, 2, 3, , ],
labels : ["2020年3月", "2020年4月", "2020年5月", "2020年6月", "2020年7月", "2020年8月"],
basicIns : [14720, 5000, 60000, 5000, 10001, ],
payParIns : [280, , , , 1005, ],
discountIns : [190, , , , 170, ],
score : [77, , , , 75, ],
mileage : [166, , , , 1000, ],
autodrive_mileage: [99999, 99999, 99999, 99999, 99999, 99999],
sumIns : [15000, 5000, 60000, 5000, 11006, ],
yearlySumIns : [, , , , , ],
yearlyPayParIns : [, , , , , ],
yearlyDiscountIns: [, , , , , ],
yearlyMileage : [, , , , , ],
yearlyAutodriveMileage: [, , , , , ],
},
{ /* 過去2 */
message : [0, 1, 2, 3, , ],
labels : ["2019年9月", "2019年10月", "2019年11月", "2019年12月", "2020年1月", "2020年2月"],
basicIns : [14720, 5000, 60000, 5000, 10001, ],
payParIns : [280, , , , 1005, ],
discountIns : [190, , , , 170, ],
score : [77, , , , 75, ],
mileage : [166, , , , 1000, ],
autodrive_mileage: [99999, 99999, 99999, 99999, 99999, 99999],
sumIns : [15000, 5000, 60000, 5000, 11006, ],
yearlySumIns : [, , , , , ],
yearlyPayParIns : [, , , , , ],
yearlyDiscountIns: [, , , , , ],
yearlyMileage : [, , , , , ],
yearlyAutodriveMileage: [, , , , , ],
},
{ /* 過去3 */
message : [0, 1, 2, 3, , ],
labels : ["2019年3月", "2019年4月", "2019年5月", "2019年6月", "2019年7月", "2019年8月"],
basicIns : [14720, 5000, 60000, 5000, 10001, ],
payParIns : [280, , , , 1005, ],
discountIns : [190, , , , 170, ],
score : [77, , , , 75, ],
mileage : [166, , , , 1000, ],
autodrive_mileage: [99999, 99999, 99999, 99999, 99999, 99999],
sumIns : [15000, 5000, 60000, 5000, 11006, ],
yearlySumIns : [, , , , , ],
yearlyPayParIns : [, , , , , ],
yearlyDiscountIns: [, , , , , ],
yearlyMileage : [, , , , , ],
yearlyAutodriveMileage: [, , , , , ],
},
{ /* 過去4 */
message : [0, 1, 2, 3, , ],
labels : ["2018年9月", "2018年10月", "2018年11月", "2018年12月", "2019年1月", "2019年2月"],
basicIns : [14720, 5000, 60000, 5000, 10001, ],
payParIns : [280, , , , 1005, ],
discountIns : [190, , , , 170, ],
score : [77, , , , 75, ],
mileage : [166, , , , 1000, ],
autodrive_mileage: [99999, 99999, 99999, 99999, 99999, 99999],
sumIns : [15000, 5000, 60000, 5000, 11006, ],
yearlySumIns : [, , , , , ],
yearlyPayParIns : [, , , , , ],
yearlyDiscountIns: [, , , , , ],
yearlyMileage : [, , , , , ],
yearlyAutodriveMileage: [, , , , , ],
},
{ /* 過去5 */
message : [0, 1, 2, 3, , ],
labels : ["2018年3月", "2018年4月", "2018年5月", "2018年6月", "2018年7月", "2018年8月"],
basicIns : [14720, 5000, 60000, 5000, 10001, ],
payParIns : [280, , , , 1005, ],
discountIns : [190, , , , 170, ],
score : [77, , , , 75, ],
mileage : [166, , , , 1000, ],
autodrive_mileage: [99999, 99999, 99999, 99999, 99999, 99999],
sumIns : [15000, 5000, 60000, 5000, 11006, ],
yearlySumIns : [, , , , , ],
yearlyPayParIns : [, , , , , ],
yearlyDiscountIns: [, , , , , ],
yearlyMileage : [, , , , , ],
yearlyAutodriveMileage: [, , , , , ],
},
{ /* 過去6 */
message : [0, 1, 2, 3, , ],
labels : ["2017年9月", "2017年10月", "2017年11月", "2017年12月", "2018年1月", "2018年2月"],
basicIns : [14720, 5000, 60000, 5000, 10001, ],
payParIns : [280, , , , 1005, ],
discountIns : [190, , , , 170, ],
score : [77, , , , 75, ],
mileage : [166, , , , 1000, ],
autodrive_mileage: [99999, 99999, 99999, 99999, 99999, 99999],
sumIns : [15000, 5000, 60000, 5000, 11006, ],
yearlySumIns : [, , , , , ],
yearlyPayParIns : [, , , , , ],
yearlyDiscountIns: [, , , , , ],
yearlyMileage : [, , , , , ],
yearlyAutodriveMileage: [, , , , , ],
},
{ /* 過去7 */
message : [0, 1, 2, 3, , ],
labels : ["2017年3月", "2017年4月", "2017年5月", "2017年6月", "2017年7月", "2017年8月"],
basicIns : [14720, 5000, 60000, 5000, 10001, ],
payParIns : [280, , , , 1005, ],
discountIns : [190, , , , 170, ],
score : [77, , , , 75, ],
mileage : [166, , , , 1000, ],
autodrive_mileage: [99999, 99999, 99999, 99999, 99999, 99999],
sumIns : [15000, 5000, 60000, 5000, 11006, ],
yearlySumIns : [, , , , , ],
yearlyPayParIns : [, , , , , ],
yearlyDiscountIns: [, , , , , ],
yearlyMileage : [, , , , , ],
yearlyAutodriveMileage: [, , , , , ],
},
{ /* 過去8 */
message : [0, 1, 2, 3, , ],
labels : ["2016年9月", "2016年10月", "2016年11月", "2016年12月", "2017年1月", "2017年2月"],
basicIns : [14720, 5000, 60000, 5000, 10001, ],
payParIns : [280, , , , 1005, ],
discountIns : [190, , , , 170, ],
score : [77, , , , 75, ],
mileage : [166, , , , 1000, ],
autodrive_mileage: [99999, 99999, 99999, 99999, 99999, 99999],
sumIns : [15000, 5000, 60000, 5000, 11006, ],
yearlySumIns : [, , , , , ],
yearlyPayParIns : [, , , , , ],
yearlyDiscountIns: [, , , , , ],
yearlyMileage : [, , , , , ],
yearlyAutodriveMileage: [, , , , , ],
},
{ /* 過去9 */
message : [0, 1, 2, 3, , ],
labels : ["2016年3月", "2016年4月", "2016年5月", "2016年6月", "2016年7月", "2016年8月"],
basicIns : [14720, 5000, 60000, 5000, 10001, ],
payParIns : [280, , , , 1005, ],
discountIns : [190, , , , 170, ],
score : [77, , , , 75, ],
mileage : [166, , , , 1000, ],
autodrive_mileage: [99999, 99999, 99999, 99999, 99999, 99999],
sumIns : [15000, 5000, 60000, 5000, 11006, ],
yearlySumIns : [, , , , , ],
yearlyPayParIns : [, , , , , ],
yearlyDiscountIns: [, , , , , ],
yearlyMileage : [, , , , , ],
yearlyAutodriveMileage: [, , , , , ],
}
];
canvas_drive_ins(graph_data_da);
});
</script>
</body>
保険料推移 - ご請求保険料：モーダル
ご請求保険料のモーダルウィンドウは「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。
<body>
<section class="t-container">
<div class="t-monthly">
<div id="shift-a-modal" class="shift-a-modal">
<div class="t-modal-inner">
<div class="t-modal-scroll">
<div class="modal-card">
<div class="modal-card-title">
<div class="modal-card-title-header">
<div id="ins_month" class="modal-card-text"></div>
</div><!-- /.modal-card-title-header -->
<span class="btn-close modal-card-close" onclick="dismissModal()">
<span class="modal-card-close-icon"></span>
</span>
</div><!-- /.modal-card-title -->
<div class="modal-card-header">
<div class="modal-card-header-block">
<div class="modal-card-header-title">ご請求保険料</div>
<div id="sum_ins" class="modal-card-table-yen"></div>
</div>
<div class="modal-card-message">
<div class="modal-card-message-text"></div>
</div>
</div><!-- /.modal-card-header -->
<div class="modal-card-body">
<div class="modal-card-body-block">
<div class="modal-card-table">
<div class="modal-card-table-row">
<div class="modal-card-table-cell">
<label>基本保険料</label>
</div>
<div class="modal-card-table-cell">
<label id="basic_ins" class="modal-card-table-yen"></label>
</div>
</div><!-- /.modal-card-table-row -->
<div class="modal-card-table-row">
<div class="modal-card-table-cell">
<label>運転分保険料</label>
</div>
<div class="modal-card-table-cell">
<label id="pay_par_ins" class="modal-card-table-yen"></label>
</div>
</div><!-- /.modal-card-table-row -->
</div><!-- /.modal-card-table -->
<div class="modal-card-otoku">
<div class="modal-card-otoku-title">安全運転お得額</div>
<div class="modal-card-otoku-block">
<label>▲</label>
<div id="discount_ins_clone" class="modal-card-table-yen"></div>
</div><!-- /.modal-card-otoku-block -->
</div><!-- /.modal-card-otoku -->
<div class="modal-card-result">
<div class="modal-card-result-block">
<div class="modal-card-result-item">
<div class="modal-card-result-item-header">
<div class="modal-card-result-item-title">
<div class="modal-card-result-item-icon t-icon-distance">走行距離</div>
</div>
</div><!-- /.modal-card-result-item-header -->
<div class="modal-card-result-item-body">
<div class="modal-card-result-item-body-inner">
<div class="modal-card-result-item-text">
<label id="mileage" class="modal-card-table-km"></label>
<div class="modal-card-result-item-add">
<div class="modal-card-result-item-add-text">
<label id="autodrive_mileage" class="modal-card-table-autodrive"></label>
</div>
</div><!-- /.modal-card-result-item-add -->
</div><!-- /.modal-card-result-item-text -->
</div><!-- /.modal-card-result-item-body-inner -->
</div><!-- /.modal-card-result-item-body -->
</div><!-- /.modal-card-result-item -->
<div class="modal-card-result-item">
<div class="modal-card-result-item-header">
<div class="modal-card-result-item-title">
<div class="modal-card-result-item-icon t-icon-stars">総合評価</div>
</div>
</div><!-- /.modal-card-result-item-header -->
<div class="modal-card-result-item-body">
<div class="modal-card-result-item-body-inner">
<div class="modal-card-result-item-text">
<label id="score" class="modal-card-table-point"></label>
</div><!-- /.modal-card-result-item-text -->
</div><!-- /.modal-card-result-item-body-inner -->
</div><!-- /.modal-card-result-item-body -->
</div><!-- /.modal-card-result-item -->
</div><!-- /.modal-card-result-block -->
</div><!-- /.modal-card-result -->
</div><!-- /.modal-card-body-block -->
</div><!-- /.modal-card-body -->
<div class="modal-card-footer t-bg-blue">
<div class="modal-card-annualinfo">
<div class="modal-card-annualinfo-header">
<div class="modal-card-annualinfo-header-title">年間合計運転分保険料</div>
</div><!-- /.modal-card-annualinfo-header -->
<div class="modal-card-annualinfo-body">
<div class="modal-card-annualinfo-body-header">
<div class="modal-card-annualinfo-body-header-title">ご請求保険料</div>
<div id="yearly_sum_ins" class="modal-card-annualinfo-body-header-price"></div>
</div><!-- /.modal-card-annualinfo-body-header -->
<div class="modal-card-annualinfo-body-item">
<div class="modal-card-annualinfo-body-item-title">年間合計運転分保険料</div>
<div id="yearly_pay_par_ins" class="modal-card-annualinfo-body-item-price"></div>
</div><!-- /.modal-card-annualinfo-body-item -->
<div class="modal-card-annualinfo-body-deals">
<div class="modal-card-annualinfo-body-deals-title">年間合計安全運転お得額</div>
<div class="modal-card-annualinfo-body-deals-price-icon">▲</div>
<div id="yearly_discount_ins" class="modal-card-annualinfo-body-deals-price"></div>
</div><!-- /.modal-card-annualinfo-body-deals -->
<div class="modal-card-annualinfo-body-mileage">
<div class="modal-card-annualinfo-body-mileage-title">年間走行距離</div>
<div id="yearly_mileage" class="modal-card-annualinfo-body-mileage-km"></div>
<div class="modal-card-annualinfo-body-mileage-add">
<label id="yearly_autodrive_mileage" class="modal-card-annualinfo-body-mileage-add-text"></label>
</div>
</div><!-- /.modal-card-annualinfo-body-mileage -->
</div><!-- /.modal-card-annualinfo-body -->
</div><!-- /.modal-card-annualinfo -->
</div><!-- /.modal-card-footer -->
</div><!-- /.modal-card -->
</div><!-- /.t-modal-scroll -->
</div><!-- /.t-modal-inner -->
<div class="black-background" onclick="dismissModal()"></div>
</div><!-- /.modal -->
</div><!-- /.t-monthly -->
</section>
</body>
保険料推移 - 運転分保険料：モーダル
運転分保険料のモーダルウィンドウは「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。
<body>
<section class="t-container">
<div class="t-monthly">
<div id="shift-da-modal" class="shift-da-modal">
<div class="t-modal-inner">
<div class="t-modal-scroll">
<div class="modal-card">
<div class="modal-card-title">
<div class="modal-card-title-header">
<div id="drive_ins_month" class="modal-card-text"></div>
</div><!-- /.modal-card-title-header -->
<span class="btn-close modal-card-close" onclick="dismissDriveModal()">
<span class="modal-card-close-icon"></span>
</span>
</div><!-- /.modal-card-title -->
<div class="modal-card-header">
<div class="modal-card-header-title">ご請求保険料</div>
<div id="drive_sum_ins" class="modal-card-table-yen"></div>
<div class="modal-card-message">
<div class="modal-card-message-text"></div>
</div>
</div><!-- /.modal-card-header -->
<div class="modal-card-body">
<div class="modal-card-body-block">
<div class="modal-card-table">
<div class="modal-card-table-row">
<div class="modal-card-table-cell">
<label>基本保険料</label>
</div>
<div class="modal-card-table-cell">
<label id="drive_basic_ins" class="modal-card-table-yen"></label>
</div>
</div><!-- /.modal-card-table-row -->
<div class="modal-card-table-row">
<div class="modal-card-table-cell">
<label>運転分保険料</label>
</div>
<div class="modal-card-table-cell">
<label id="drive_pay_par_ins" class="modal-card-table-yen"></label>
</div>
</div><!-- /.modal-card-table-row -->
</div><!-- /.modal-card-table -->
<div class="modal-card-otoku">
<div class="modal-card-otoku-title">安全運転お得額</div>
<div class="modal-card-otoku-block">
<label>▲</label>
<div id="drive_discount_ins_clone" class="modal-card-table-yen"></div>
</div><!-- /.modal-card-otoku-block -->
</div><!-- /.modal-card-otoku -->
<div class="modal-card-result">
<div class="modal-card-result-block">
<div class="modal-card-result-item">
<div class="modal-card-result-item-header">
<div class="modal-card-result-item-title">
<div class="modal-card-result-item-icon t-icon-distance">走行距離</div>
</div>
</div><!-- /.modal-card-result-item-header -->
<div class="modal-card-result-item-body">
<div class="modal-card-result-item-body-inner">
<div class="modal-card-result-item-text">
<label id="drive_mileage" class="modal-card-table-km"></label>
<div class="modal-card-result-item-add">
<div class="modal-card-result-item-add-text">
<label id="drive_autodrive_mileage" class="modal-card-table-autodrive"></label>
</div>
</div><!-- /.modal-card-result-item-add -->
</div><!-- /.modal-card-result-item-text -->
</div><!-- /.modal-card-result-item-body-inner -->
</div><!-- /.modal-card-result-item-body -->
</div><!-- /.modal-card-result-item -->
<div class="modal-card-result-item">
<div class="modal-card-result-item-header">
<div class="modal-card-result-item-title">
<div class="modal-card-result-item-icon t-icon-stars">総合評価</div>
</div>
</div><!-- /.modal-card-result-item-header -->
<div class="modal-card-result-item-body">
<div class="modal-card-result-item-body-inner">
<div class="modal-card-result-item-text">
<label id="drive_score" class="modal-card-table-point"></label>
</div><!-- /.modal-card-result-item-text -->
</div><!-- /.modal-card-result-item-body-inner -->
</div><!-- /.modal-card-result-item-body -->
</div><!-- /.modal-card-result-item -->
</div><!-- /.modal-card-result-block -->
</div><!-- /.modal-card-result -->
</div><!-- /.modal-card-body-block -->
</div><!-- /.modal-card-body -->
<div class="modal-card-footer t-bg-blue">
<div class="modal-card-annualinfo">
<div class="modal-card-annualinfo-header">
<div class="modal-card-annualinfo-header-title">年間合計運転分保険料</div>
</div><!-- /.modal-card-annualinfo-header -->
<div class="modal-card-annualinfo-body">
<div class="modal-card-annualinfo-body-header">
<div class="modal-card-annualinfo-body-header-title">ご請求保険料</div>
<div id="drive_yearly_sum_ins" class="modal-card-annualinfo-body-header-price"></div>
</div><!-- /.modal-card-annualinfo-body-header -->
<div class="modal-card-annualinfo-body-item">
<div class="modal-card-annualinfo-body-item-title">年間合計運転分保険料</div>
<div id="drive_yearly_pay_par_ins" class="modal-card-annualinfo-body-item-price"></div>
</div><!-- /.modal-card-annualinfo-body-item -->
<div class="modal-card-annualinfo-body-deals">
<div class="modal-card-annualinfo-body-deals-title">年間合計安全運転お得額</div>
<div class="modal-card-annualinfo-body-deals-price-icon">▲</div>
<div id="drive_yearly_discount_ins" class="modal-card-annualinfo-body-deals-price"></div>
</div><!-- /.modal-card-annualinfo-body-deals -->
<div class="modal-card-annualinfo-body-mileage">
<div class="modal-card-annualinfo-body-mileage-title">年間走行距離</div>
<div id="drive_yearly_mileage" class="modal-card-annualinfo-body-mileage-km"></div>
<div class="modal-card-annualinfo-body-mileage-add">
<label id="drive_yearly_autodrive_mileage" class="modal-card-annualinfo-body-mileage-add-text"></label>
</div>
</div><!-- /.modal-card-annualinfo-body-mileage -->
</div><!-- /.modal-card-annualinfo-body -->
</div><!-- /.modal-card-annualinfo -->
</div><!-- /.modal-card-footer -->
</div><!-- /.modal-card -->
</div><!-- /.t-modal-scroll -->
</div><!-- /.t-modal-inner -->
<div class="black-background" onclick="dismissDriveModal()"></div>
</div><!-- /.modal -->
</div><!-- /.t-monthly -->
</section>
</body>
保険料推移 - 安全運転スコア
運転分保険料・請求保険料は「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。
（※関連ファイル：Chart.min.js、shift-b.js）
安全運転スコア
安全運転スコアに応じて運転分保険料が割引に。
/
<body>
<section class="t-container">
<div class="t-monthly">
<div class="t-monthly-content-item">
<div class="t-monthly-content-shift">
<div class="t-block">
<div id="graph-b" class="t-monthly-content-shift-block">
<div class="t-monthly-content-shift-block-header">
<div class="t-monthly-content-shift-title">安全運転スコア</div>
<div class="t-monthly-content-shift-text">
安全運転スコアに応じて運転分保険料が割引に。<br><span class="t-monthly-content-shift-icon-blue">80％割引</span> <span class="t-monthly-content-shift-icon-lightblue">40％割引</span>
</div>
</div><!-- /.t-monthly-content-shift-block-header -->
<div class="t-monthly-content-shift-linegraph">
<div class="t-monthly-content-shift-linegraph-item">
<div class="b_canvas_wrap">
<canvas id="canvas_h12"></canvas>
</div><!-- /.b_canvas_wrap -->
</div><!-- /.t-monthly-content-shift-linegraph-item -->
<div class="t-monthly-content-shift-linegraph-button">
<div class="t-monthly-content-shift-linegraph-button-icon">
<div id="linegraph-kako">
<div id="linegraph-paging-prev"><img src="images/monthly/btn02.png" alt="Prev"></div>
<div class="linegraph-paging-this"></div>
<div class="linegraph-paging-sprit">/</div>
<div class="linegraph-paging-all"></div>
<div id="linegraph-paging-next"><img src="images/monthly/btn01.png" alt="Next"></div>
</div>
</div>
</div><!-- /.t-monthly-content-shift-linegraph-button -->
</div><!-- /.t-monthly-content-shift-linegraph -->
</div><!-- /.t-monthly-content-shift-block -->
</div><!-- /.t-block -->
</div><!-- /.t-monthly-content-shift -->
</div><!-- /.t-monthly-content-item -->
</div><!-- /.t-monthly -->
</section>
</body>
保険料推移 - 安全運転スコア：グラフの設定
【データセット】
| labels | 年月の設定 |
|---|---|
| totalScore | 総合スコア |
各グラフの設定は下記を参考に記述してください。
<body>
<script type="text/javascript">
$(window).on('load', function(){
// 月間総合評価推移
var graph_data_b = [
{ /* 直近6ヶ月 */
labels : ["2020年9月", "2020年10月", "2020年11月", "2020年12月", "2021年1月", "2021年2月"],
totalScore : [28, 69, 83, 70, 42, 90]
},
{ /* 過去1 */
labels : ["2020年3月", "2020年4月", "2020年5月", "2020年6月", "2020年7月", "2020年8月"],
totalScore : [10, 20, 30, 50, 60, 70]
},
{ /* 過去2 */
labels : ["2019年9月", "2019年10月", "2019年11月", "2019年12月", "2020年1月", "2020年2月"],
totalScore : [28, 69, 83, 70, 42, 90]
},
{ /* 過去3 */
labels : ["2019年3月", "2019年4月", "2019年5月", "2019年6月", "2019年7月", "2019年8月"],
totalScore : [10, 20, 30, 50, 60, 70]
},
{ /* 過去4 */
labels : ["2018年9月", "2018年10月", "2018年11月", "2018年12月", "2019年1月", "2019年2月"],
totalScore : [28, 69, 83, 70, 42, 90]
},
{ /* 過去5 */
labels : ["2018年3月", "2018年4月", "2018年5月", "2018年6月", "2018年7月", "2018年8月"],
totalScore : [10, 20, 30, 50, 60, 70]
},
{ /* 過去6 */
labels : ["2017年9月", "2017年10月", "2017年11月", "2017年12月", "2018年1月", "2018年2月"],
totalScore : [28, 69, 83, 70, 42, 90]
},
{ /* 過去7 */
labels : ["2017年3月", "2017年4月", "2017年5月", "2017年6月", "2017年7月", "2017年8月"],
totalScore : [10, 20, 30, 50, 60, 70]
},
{ /* 過去8 */
labels : ["2016年9月", "2016年10月", "2016年11月", "2016年12月", "2017年1月", "2017年2月"],
totalScore : [28, 69, 83, 70, 42, 90]
},
{ /* 過去9 */
labels : ["2016年3月", "2016年4月", "2016年5月", "2016年6月", "2016年7月", "2016年8月"],
totalScore : [10, 20, 30, 50, 60, 70]
}
];
canvas_linegraph_ins(graph_data_b);
});
</script>
</body>
走行実績 - 安全運転スコア分布
安全運転スコア分布は「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。
（※関連ファイル：Chart.min.js、jquery-3.4.1.min.js、component.js）
安全運転スコア分布
| 80点以上 | 30 40 |
|---|---|
| 60～79点 | 24 30 |
| 59点以下 | 19 30 |
安全運転スコア分布
ご参考
毎月の安全運転スコアに応じて、運転分保険料が割引となります。
安全運転スコアが80点以上
⇒運転分保険料が80％割引
⇒運転分保険料が80％割引
安全運転スコアが60～79点
⇒運転分保険料が40％割引
⇒運転分保険料が40％割引
安全運転スコアが59点以下
⇒運転分保険料の割引なし
⇒運転分保険料の割引なし
ご注意
運転分保険料の割引率を決める毎月の安全運転スコアは、走行ごとの点数の平均ではなく、1か月分の累計の走行結果（速度超過・急アクセル・急ブレーキの発生頻度）に基づき算出されます。
<body>
<section class="t-container">
<div class="t-monthly">
<div class="t-monthly-content">
<div class="t-monthly-content-item">
<div class="t-monthly-content-performance">
<div class="t-monthly-content-performance-block-wrap">
<div class="t-monthly-content-performance-title">
<span class="t-monthly-content-performance-title-icon t-modal-open" data-openMadal="modal02"><img src="../images/monthly/ico25.png" alt=""></span>
<div class="t-monthly-content-performance-title-text">安全運転スコア分布</div>
</div><!-- /.t-monthly-content-performance-title -->
<div class="t-monthly-content-performance-circlechart">
<div class="t-monthly-content-performance-circlechart-uchiwake">
<div class="t-monthly-content-performance-circlechart-uchiwake-graph">
<canvas id="uchiwake-doughnut"></canvas>
</div><!-- /.t-monthly-content-performance-circlechart-uchiwake-graph -->
</div><!-- /.t-monthly-content-performance-circlechart-uchiwake -->
<table class="t-monthly-content-performance-circlechart-annotation">
<tbody>
<tr>
<th>
<span class="t-monthly-content-performance-circlechart-annotation-title">80点以上</span>
</th>
<td>
<span class="t-monthly-content-performance-circlechart-annotation-item">
<span class="t-monthly-content-performance-circlechart-annotation-count">30</span>
</span>
<span class="t-monthly-content-performance-circlechart-annotation-item">
<span class="t-monthly-content-performance-circlechart-annotation-percent">40</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="t-monthly-content-performance-circlechart-annotation-title">60～79点</span>
</th>
<td>
<span class="t-monthly-content-performance-circlechart-annotation-item">
<span class="t-monthly-content-performance-circlechart-annotation-count">24</span>
</span>
<span class="t-monthly-content-performance-circlechart-annotation-item">
<span class="t-monthly-content-performance-circlechart-annotation-percent">30</span>
</span>
</td>
</tr>
<tr>
<th>
<span class="t-monthly-content-performance-circlechart-annotation-title">59点以下</span>
</th>
<td>
<span class="t-monthly-content-performance-circlechart-annotation-item">
<span class="t-monthly-content-performance-circlechart-annotation-count">19</span>
</span>
<span class="t-monthly-content-performance-circlechart-annotation-item">
<span class="t-monthly-content-performance-circlechart-annotation-percent">30</span>
</span>
</td>
</tr>
</tbody>
</table>
</div><!-- /.t-monthly-content-performance-circlechart -->
</div><!-- /.t-monthly-content-performance-block-wrap -->
</div><!-- /.t-monthly-content-performance -->
</div><!-- /.t-monthly-content-item -->
</div><!-- /.t-monthly-content -->
<div id="modal02" class="t-modal">
<div class="t-modal-inner">
<div class="t-modal-scroll">
<div class="t-modal-card">
<div class="t-modal-card-body">
<div class="t-modal-card-header">
<div class="t-modal-card-title">
<div class="t-modal-card-text">安全運転スコア分布</div>
</div><!-- /.t-modal-card-title -->
<span class="btn-close t-modal-card-close t-modal-close">
<span class="t-modal-card-close-icon"></span>
</span>
</div><!-- /.t-modal-card-header -->
<div class="t-modal-card-body">
<div class="t-modal-card-body-block">
<div class="t-modal-card-body-text">走行ごとの安全運転スコアについて、点数区分（「59点以下」「60～79点」「80点以上」）ごとの回数と割合を確認できます。<br>運転分保険料80％割引を目指して、安全運転を継続してください。</div>
<div class="t-modal-card-body-block-sub">
<div class="t-modal-card-body-readtitle">ご参考</div>
<div class="t-modal-card-body-readtext">毎月の安全運転スコアに応じて、運転分保険料が割引となります。</div>
<div class="t-modal-card-body-center">
<div class="t-modal-card-body-text">安全運転スコアが80点以上<br>⇒運転分保険料が80％割引</div>
<div class="t-modal-card-body-text">安全運転スコアが60～79点<br>⇒運転分保険料が40％割引</div>
<div class="t-modal-card-body-text">安全運転スコアが59点以下<br>⇒運転分保険料の割引なし</div>
</div><!-- /.t-modal-card-body-center -->
</div><!-- /.t-modal-card-body-block-sub -->
<div class="t-modal-card-body-block-sub">
<div class="t-modal-card-body-readtitle">ご注意</div>
<div class="t-modal-card-body-readtext">運転分保険料の割引率を決める毎月の安全運転スコアは、走行ごとの点数の平均ではなく、1か月分の累計の走行結果（速度超過・急アクセル・急ブレーキの発生頻度）に基づき算出されます。</div>
</div><!-- /.t-modal-card-body-block-sub -->
</div><!-- /.t-modal-card-body-block -->
</div><!-- /.t-modal-card-body -->
</div><!-- /.t-modal-card-body -->
</div><!-- /.t-modal-card -->
</div><!-- /.t-modal-scroll -->
</div><!-- /.t-modal-inner -->
</div><!-- /.t-modal -->
</div><!-- /.t-monthly -->
</section>
</body>
走行実績 - 安全運転スコア分布：円グラフの設定
円グラフの設定は合計が100になるように0～100の数値を設定してください。
【データセット】
| uchiwake80up | 80点以上 |
|---|---|
| uchiwake60_79 | 60～79点 |
| uchiwake59under | 59点以下 |
各グラフの設定は下記を参考に記述してください。
<body>
<script type="text/javascript">
$(window).on('load', function(){
// 評価内訳
var uchiwake80up = 40;
var uchiwake60_79 = 30;
var uchiwake59under= 30;
var uchiwakeCtx = document.getElementById("uchiwake-doughnut");
var uchiwakeDoughnut = new Chart(uchiwakeCtx, {
type: 'doughnut',
data: {
datasets: [{
backgroundColor: [// 色設定
"#2d376e",// 80点以上
"#9696d2",// 79～60点
"#0064ff"// 59点以下
],
data: [ uchiwake80up, uchiwake60_79, uchiwake59under ]
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
position: 'center',
layout: {
padding: {
top: 0,
left: 0,
right: 0,
bottom: 0
}
},
tooltips: {
enabled: false
}
}
});
uchiwakeDoughnut.canvas.parentNode.style.height = '215px';
});
</script>
</body>
走行実績 - 安全運転スコア分布：モーダル
安全運転スコア分布のモーダルウィンドウは「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。
安全運転スコア分布
走行ごとの安全運転スコアについて、点数区分（「59点以下」「60～79点」「80点以上」）ごとの回数と割合を確認できます。
運転分保険料80％割引を目指して、安全運転を継続してください。
運転分保険料80％割引を目指して、安全運転を継続してください。
ご参考
毎月の安全運転スコアに応じて、運転分保険料が割引となります。
安全運転スコアが80点以上
⇒運転分保険料が80％割引
⇒運転分保険料が80％割引
安全運転スコアが60～79点
⇒運転分保険料が40％割引
⇒運転分保険料が40％割引
安全運転スコアが59点以下
⇒運転分保険料の割引なし
⇒運転分保険料の割引なし
ご注意
運転分保険料の割引率を決める毎月の安全運転スコアは、走行ごとの点数の平均ではなく、1か月分の累計の走行結果（速度超過・急アクセル・急ブレーキの発生頻度）に基づき算出されます。
<body>
<section class="t-container">
<div class="t-monthly">
<div id="modal02" class="t-modal">
<div class="t-modal-inner">
<div class="t-modal-scroll">
<div class="t-modal-card">
<div class="t-modal-card-body">
<div class="t-modal-card-header">
<div class="t-modal-card-title">
<div class="t-modal-card-text">安全運転スコア分布</div>
</div><!-- /.t-modal-card-title -->
<span class="btn-close t-modal-card-close t-modal-close">
<span class="t-modal-card-close-icon"></span>
</span>
</div><!-- /.t-modal-card-header -->
<div class="t-modal-card-body">
<div class="t-modal-card-body-block">
<div class="t-modal-card-body-text">走行ごとの安全運転スコアについて、点数区分（「59点以下」「60～79点」「80点以上」）ごとの回数と割合を確認できます。<br>運転分保険料80％割引を目指して、安全運転を継続してください。</div>
<div class="t-modal-card-body-block-sub">
<div class="t-modal-card-body-readtitle">ご参考</div>
<div class="t-modal-card-body-readtext">毎月の安全運転スコアに応じて、運転分保険料が割引となります。</div>
<div class="t-modal-card-body-center">
<div class="t-modal-card-body-text">安全運転スコアが80点以上<br>⇒運転分保険料が80％割引</div>
<div class="t-modal-card-body-text">安全運転スコアが60～79点<br>⇒運転分保険料が40％割引</div>
<div class="t-modal-card-body-text">安全運転スコアが59点以下<br>⇒運転分保険料の割引なし</div>
</div><!-- /.t-modal-card-body-center -->
</div><!-- /.t-modal-card-body-block-sub -->
<div class="t-modal-card-body-block-sub">
<div class="t-modal-card-body-readtitle">ご注意</div>
<div class="t-modal-card-body-readtext">運転分保険料の割引率を決める毎月の安全運転スコアは、走行ごとの点数の平均ではなく、1か月分の累計の走行結果（速度超過・急アクセル・急ブレーキの発生頻度）に基づき算出されます。</div>
</div><!-- /.t-modal-card-body-block-sub -->
</div><!-- /.t-modal-card-body-block -->
</div><!-- /.t-modal-card-body -->
</div><!-- /.t-modal-card-body -->
</div><!-- /.t-modal-card -->
</div><!-- /.t-modal-scroll -->
</div><!-- /.t-modal-inner -->
</div><!-- /.t-modal -->
</div><!-- /.t-monthly -->
</section>
</body>