私は、そのような ajax 呼び出しからデータを取得する HighCharts 棒グラフを持っています。
var updateChart = function() {
$.ajax({
url: "/theurl/theid",
type: "Get",
success: function(data) {
chart.xAxis[0].setCategories(data.SomeText);
chart.series[0].setData(data.SomeData, true);
chart.series[1].setData(data.OtherData, true);
}
});
};
チャートはこのように構築されています
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart(
{
chart: {
type: 'bar',
renderTo: 'container',
height: 750
}, ... (more options removed for brevity),
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{y} %',
style: {
fontWeight: 'bold',
color: '#3b3b3b',
fontSize: '125%'
},
useHTML: true
}
},
bar: {
dataLabels: {
enabled: true
},
}
},
... (more options removed for brevity)
);
});
チャートのデータは 10 秒ごとに動的に更新され、ページ全体をリロードすることはできません。
コンソールから updateChart() を実行した場合にのみ、データが読み込まれ、グラフが表示されます。最初に updateChart() を実行するとすべて問題ないように見えますが、2 回目に (ページをリロードせずに) 実行すると、パーセンテージ (100%、55% など) を表示する必要がある dataLabels を除いてすべてが表示されます。
plotOptions.Series.DataLabels から useHTML = true オプションを削除すると、パーセンテージが再び表示されますが、useHtml オプションを使用して修正していた他のスタイリングの問題が発生します。
useHTML を true に設定し、更新時に dataLabels が消えないようにする方法はありますか?