javascript - highcharts:导出的图像中没有数据

Question

折线图等其他图表中会显示数据。

但是只有当鼠标悬停在面积图上时才能看到数据，并且导出的图像没有任何数据。有没有办法在导出图像时显示数据？

好像见过一个控制它的属性，但现在找不到了。

这是下面的代码。

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>

Answer 1

您需要启用dataLabels对于所有系列或单个系列，显示您要查找的标签。

像这样

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>

<小时/>

要在导出时仅具有标签，需要在 exporting.chartOptions 中设置选项。像这样:

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

工作示例:(尝试从该图表导出图片)

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>