与colouraxis更新样式的Highcharts树图

时间:2017-03-09 08:18:52

标签: javascript charts highcharts

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

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/

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

1 个答案:

答案 0 :(得分:0)

由于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/