更新: 問題を示す jsfiddle は次のとおりです:http://jsfiddle.net/pynju/1/
月曜日の青い列をクリックします。詳細ビューが読み込まれると、01 ~ 07 に 3 つの列 (2 つと予想) があることがわかります。最も高いバーをクリックして元のビューに戻ります。xAxis のラベルが削除されていないことに注意してください。
===============
2 つの系列が、横に並んで棒グラフのペアとして表示される棒グラフがあります。
series: [{
showInLegend: false,
data: dowChartData
},{
showInLegend: false,
data: avgUserDowChartData
}],
。
dowChartData = [ {
y: 98.74,
color: '#0072ff',
drilldown: {
name: 'Category Engagement - Sunday',
categories: ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
data: [0,637,0,0,0,173,48.54,48.54,0,0,0,0,0,0,102.24,166.36,706.59,699.18,298.32,184.14,97.08,1539,0,1224.56],
color: '#0072ff',
data2: [506.80686467275,354.56354558498,333.25158689567,234.19283190879,234.82132336088,220.03247578171,222.86420797556,218.14034615202,170.42559544164,171.54776353196,249.24788461442,345.14915669555,206.65543589797,243.38811965637,367.02593304906,378.83677778129,467.45739743621,424.26264387522,639.60922934374,679.71299714907,373.26353846375,480.94380626458,551.82326068362,466.77469230724],
color2: '#C00'
}
}
AND SIMILAR
。
avgUserDowChartData = [ {
y: 142.35,
color: '#C00'
},
AND SIMILAR
初期データは曜日データで、X軸は日曜日 - 月曜日 - 火曜日 - 水曜日 - 木曜日 - 金曜日 - 土曜日です。
最初のシリーズには、新しいデータとデータ2を含むドリルダウン要素があります(上記を参照)。
ドリルダウンのデモ コードを例として、次のコードを配置します。
column: {
borderWidth: 0,
cursor: 'pointer',
point: {
events: {
click: function(event) {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(dowChart, drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.data2, drilldown.color2);
} else { // restore
setChart(dowChart, '', dowCategories, dowChartData);
}
}
}
},
チャート ハンドラーを設定します。
function setChart(chart, name, categories, data, color, data2, color2) {
chart.xAxis[0].setCategories(categories);
// chart.series[0].remove();
for (var i = 0; i < chart.series.length; i++) {
chart.series[i].remove();
}
chart.addSeries({
showInLegend: false,
name: name,
data: data,
color: color || 'white'
});
if (typeof(data2) != undefined && data2.length > 0) {
chart.addSeries({
showInLegend: false,
name: name,
data: data2,
color: color2 || 'white'
});
}
}
最初のチャートは完全に正常に表示されます。
青いバー (ドリルダウンのあるデータ セット) のいずれかをクリックすると、最初の 7 つの x 軸項目がおかしくなります。
初期データセットがコードによって削除されていないようです。
for (var i = 0; i < chart.series.length; i++) {
chart.series[i].remove();
}
元のデータ セット/シリーズにリセットする目的でいずれかのバーをクリックすると、次のようになります。
つまり、私が使用している系列削除コードが機能していないことは明らかです。クリック内容に応じて毎回表示する必要がある 2 つの系列とチャート上のデータを完全に削除する最適な方法は何ですか?
ベストアンサー1
すべてのチャートシリーズを削除するには、これを試してください。
while(chart.series.length > 0)
chart.series[0].remove(true);
私にとってはうまくいきました。コード
for (var i = 0; i < chart.series.length; i++)
chart.series.length
は呼び出されるたびに減少するため、動作しませんremove()
。その場合、 はi
期待される長さに達することはありません。