Question

我知道类型为“bar”的图表不支持标记。但仍然有任何解决方法在Highcharts中的条形图栏内显示图像/标记符号。

Highchart对象：

Highcharts.chart('container', {
  chart: {
    type: 'bar',
  },
  title: {
    text: 'Historic World Population by Region'
  },
  subtitle: {
    text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
  },
  xAxis: {
    categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
    title: {
      text: null
    }
  },
  yAxis: {
    // min: 0,
    title: {
      text: 'Population (millions)',
      align: 'high'
    }
  },
  tooltip: {

    formatter: function() {

      return '<b>' + this.series.name + '<br/>' + this.x + '<br/>' + this.y + '000000</b>'

    }

  },
  plotOptions: {
    series: {

      allowPointSelect: true,

      marker: {
        enabled: true,

        symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
      },
      dataLabels: {
        enabled: true,
        color: "blue",
        crop: false,
        overflow: "none"
      },

    }

  },
  legend: {
    align: 'right',
    verticalAlign: 'top',
    layout: 'vertical',
    // x: -150,
    // y: 100,
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Year 1800',

    data: [-10700, 45000, 45000, -20300, 20000],
    zones: [{
      value: 100,
      color: 'orange'
    }, {
      value: 500,
      color: 'black'
    }, {
      color: 'blue'
    }]
  }]
});

参考：http://jsfiddle.net/fv1tmd0b/

Answer 1

添加带有禁用鼠标跟踪的新分散系列，并将其链接到主系列。在data属性中设置标记位置。

{
  enableMouseTracking: false,
  linkedTo: '1',
  type: 'scatter',
  data: [-10700, 45000, 45000, -20300, 20000]
}

示例：http://jsfiddle.net/fv1tmd0b/1/

在Highcharts中的条形图栏内显示标记或图像

1 个答案: