具有颜色轴更新样式的 Highcharts 树图答案

【问题标题】：Highcharts treemap with colouraxis updating styles具有颜色轴更新样式的 Highcharts 树图
【发布时间】：2017-03-09 08:18:51
【问题描述】：

我尝试了各种更新树形图颜色轴图例字体大小和字体系列的方法

var options = {
colorAxis: {
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0],
    labels: {
        style: {
            fontSize: '10px',
        fontFamily: 'Arial'
        }
    }
},
series: [{
    type: 'treemap',
    layoutAlgorithm: 'squarified',
    data: [{
        name: 'A', value: 6,colorValue: 1 }, { name: 'B',value: 6,colorValue: 2 }, {
        name: 'C',value: 4,colorValue: 3}, {name: 'D',value: 3,colorValue: 4 }, {
        name: 'E',value: 2,colorValue: 5 }, {name: 'F',value: 2, colorValue: 6}, {
        name: 'G',value: 1,colorValue: 7}] }],
title: {
    text: 'Highcharts Treemap'
}

};

var chart = Highcharts.chart('container', options);

$('#update').click(function () {
chart.update({
  chart:{
    style: {
        fontSize: '20px',
      fontFamily: 'HelveticaNeue'
    }
  },
  legend: {
    itemStyle: {
                    fontSize: '20px',
                    fontFamily: 'HelveticaNeue'
                    }
  },
    colorAxis: {
    labels: {
        style: {
            fontSize: '20px',
        fontFamily: 'HelveticaNeue'
        }
    }}
});
chart.legend.update({
    itemStyle: {
      fontSize: '20px',
      fontFamily: 'HelveticaNeue'
  }
})

});

请看这里 - http://jsfiddle.net/hsuh/t04qe2xx/8/

样式似乎没有更新。请帮忙。谢谢

【问题讨论】：

标签： javascript charts highcharts

【解决方案1】：

由于 id 不同，您的点击事件不会被触发。

从按钮的 id 中删除哈希：<button id='update'> Update </button>

然后你可以通过axis.update()更新轴

$('#update').click(function() {
  chart.colorAxis[0].update({
    labels: {
      style: {
        fontSize: '20px'
      }
    }
  })
});

示例：http://jsfiddle.net/t04qe2xx/9/

【讨论】：