いつも参考にさせて頂いております。
kViewerのヘッダーコンテンツ領域を利用して、グラフを表示しようとしています。
highchartsを利用して、棒グラフ→クリックで内訳にドリルダウン表示、ができればと考えています。
ヘッダーコンテンツ
<div id="dori" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScriptファイル
(function() {
"use strict";
loadJS('https://js.cybozu.com/jquery/2.1.4/jquery.min.js');
loadJS('https://code.highcharts.com/highcharts.js');
// ページとJSライブラリ群の読み込み待ち
kv.events.records.mounted = [function (state) {
(function waitForLibsLoad() {
if((typeof jQuery !== 'undefined') && (typeof Highcharts !== 'undefined')) {
loadJS('https://code.highcharts.com/modules/data.js');
loadJS('https://code.highcharts.com/modules/drilldown.js');
if( !document.URL.match(/show/) ){
// 一覧画面へのカスタマイズ
kviewIndex(state);
} else {
// 詳細画面へのカスタマイズ
}
} else {
setTimeout(waitForLibsLoad, 0);
}
})();
return state;
}];
// 一覧画面のメイン関数
function kviewIndex(state){
//データからグラフを生成
$(function () {
$('#dori').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Browser market shares'
},
subtitle: {
text: 'Click the columns to view versions.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [
{
name: 'Browsers',
colorByPoint: true,
data: [
{
name: 'Chrome',
y: 62.74,
drilldown: 'Chrome'
}
]
}
],
drilldown: {
series: [
{
name: 'Chrome',
id: 'Chrome',
data: [
[
'v65.0',
0.1
],
[
'v64.0',
1.3
],
[
'v63.0',
53.02
]
]
}
]
}
})
});
return;
}
// ======<<以下、オプション関数群>>======
// 外部JSの読み込み
function loadJS(src){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
document.getElementsByTagName('head')[0].appendChild(script);
}
})();
上記の方法で、棒グラフの表示はできるのですが、drilldownが機能しません。
表示後、ChromeのデバックよりSourcesを確認すると、modules/data.js、drilldown.jsは読み込めていそうなのですが、
グラフ描画の時点では読み込めていない挙動のように見受けられます。
どのようにすれば、正しく描画できるでしょうか。
そもそも見当違いかもしれませんが、よろしくお願い致します。