代码之家  ›  专栏  ›  技术社区  ›  Can Zhang

海图:导出的图像中没有数据

  •  0
  • Can Zhang  · 技术社区  · 6 年前

    但只有在面积图中悬停并且导出的图像没有数据时,才能看到数据ethier.Is 在导出图像时有没有显示数据的方法?

    好像我见过一个控制它的阁楼,但我现在找不到了。

    This is the image that has no data 这是下面的代码。

    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>
    1 回复  |  直到 6 年前
        1
  •  1
  •   ewolden    6 年前

    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”></部门>
    
    
    
    
    <脚本src=“http://cdn.hcharts.cn/highcharts/highcharts.js“></script>
    <脚本src=“http://cdn.hcharts.cn/highcharts/modules/exporting.js“></script>