CODEWITHSUNDEEP
javascripthighcharts
Can Zhang
Can Zhang

Reputation: 38

highcharts: there are no data in exported image

In other charts like line chart, data are showed.

But you can only see data when you hover in area chart and the exported image has no data ethier.Is there a way to show data in exporting image?

It seems that I have seen one attibute that controls it,but I can not find it now.

This is the image that has no data This is the code below. 

var chart = Highcharts.chart('container',{
chart: {
	type: 'area'
},
title: {
	text: '美苏核武器库存量'
},
xAxis: {
	allowDecimals: false
},
yAxis: {
	title: {
		text: '核武库国家'
	},
	labels: {
		formatter: function () {
			return this.value / 1000 + 'k';
		}
	}
},
tooltip: {
	shared: true,
	crosshairs: {
		width: 1,
		color: '#AAA',
	},
	pointFormat: '{series.name} <b>{point.y:,.0f}</b><br/>'
},
plotOptions: {
	area: {
		pointStart: 1940,
		marker: {
			enabled: false,
			symbol: 'circle',
			radius: 2,
			states: {
				hover: {
					enabled: true
				}
			}
		}
	}
},
series: [{
	name: 'USA',
	data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
		   1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
		   27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
		   26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
		   24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
		   22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
		   10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
}, {
	name: 'Russia',
	data: [null, null, null, null, null, null, null, null, null, null,
		   5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
		   4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
		   15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
		   33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
		   35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
		   21000, 20000, 19000, 18000, 18000, 17000, 16000]
}]
});
<div id="container" class="chart"></div>




<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>

Upvotes: 0

Views: 142

Answers (1)

ewolden
ewolden

Reputation: 5803

You need to enable dataLabels for all series, or for individual series, to show the labels you are after.

Like this

plotOptions: {
  area: {
    dataLabels: {
      enabled: true
    },
  }
}


var chart = Highcharts.chart('container',{
chart: {
	type: 'area'
},
title: {
	text: '美苏核武器库存量'
},
xAxis: {
	allowDecimals: false
},
yAxis: {
	title: {
		text: '核武库国家'
	},
	labels: {
		formatter: function () {
			return this.value / 1000 + 'k';
		}
	}
},
tooltip: {
	shared: true,
	crosshairs: {
		width: 1,
		color: '#AAA',
	},
	pointFormat: '{series.name} <b>{point.y:,.0f}</b><br/>'
},
plotOptions: {
	area: {
        dataLabels: {
            enabled: true
        },
		pointStart: 1940,
		marker: {
			enabled: false,
			symbol: 'circle',
			radius: 2,
			states: {
				hover: {
					enabled: true
				}
			}
		}
	}
},
series: [{
	name: 'USA',
	data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
		   1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
		   27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
		   26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
		   24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
		   22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
		   10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
}, {
	name: 'Russia',
	data: [null, null, null, null, null, null, null, null, null, null,
		   5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
		   4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
		   15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
		   33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
		   35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
		   21000, 20000, 19000, 18000, 18000, 17000, 16000]
}]
});
<div id="container" class="chart"></div>




<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>

To only have labels when you export, you need to set the options in exporting.chartOptions. Like this:

exporting: {
  chartOptions: {
    plotOptions: {
      area: {
        dataLabels: {
          enabled: true
        },
      }
    }
  }
}

Working example: (try exporting a picture from that graph)

var chart = Highcharts.chart('container', {
  exporting: {
    chartOptions: {
      plotOptions: {
        area: {
          dataLabels: {
            enabled: true
          },
        }
      }
    }
  },
  chart: {
    type: 'area'
  },
  title: {
    text: '美苏核武器库存量'
  },
  xAxis: {
    allowDecimals: false
  },
  yAxis: {
    title: {
      text: '核武库国家'
    },
    labels: {
      formatter: function() {
        return this.value / 1000 + 'k';
      }
    }
  },
  tooltip: {
    shared: true,
    crosshairs: {
      width: 1,
      color: '#AAA',
    },
    pointFormat: '{series.name} <b>{point.y:,.0f}</b><br/>'
  },
  plotOptions: {
    area: {
      pointStart: 1940,
      marker: {
        enabled: false,
        symbol: 'circle',
        radius: 2,
        states: {
          hover: {
            enabled: true
          }
        }
      }
    }
  },
  series: [{
    name: 'USA',
    data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
      1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
      27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
      26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
      24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
      22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
      10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104
    ]
  }, {
    name: 'Russia',
    data: [null, null, null, null, null, null, null, null, null, null,
      5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
      4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
      15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
      33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
      35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
      21000, 20000, 19000, 18000, 18000, 17000, 16000
    ]
  }]
});
<div id="container" class="chart"></div>




<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>

Upvotes: 1

Related Questions