highcharts - 如何在 Highcharts 类别标签中显示 Δ？

Question

我遇到了一个问题，我很确定这正是我设置对象值的地方，但是，我似乎无法让它发挥作用。

我试图将 Δ 字符放在 highcharts.js 类别中，如下面的代码片段所示:

Highcharts.chart('container', {

  chart: {
    type: 'bar'
  },

  title: {
    text: 'Catawba Average Points'
  },

  xAxis: {
    categories: ['Emergency TS Δs', 'Column B', 'Column C', 'Column D', 'Column E', 'Column F', 'Column G'],
    labels: {
      useHtml: true
    }
  },

  plotOptions: {
    bar: {
      stacking: 'normal',
      groupPadding: 0.10,
      pointPadding: 0,
      dataLabels: {
        enabled: true,
        alignt: 'right',
        formatter: function() {
          if (this.y != 0) {
            return this.y;
          }
        }
      }
    }
  },

  series: [{
    name: '(-) Var',
    data: [0, 0, 0, 0, 0, 2, 0, 0],
    color: '#ffa6a6',
    stack: '2017Q3',
    showInLegend: false
  }, {
    name: '(+) Var',
    data: [0, 0, 0, 0, .1, 0, 0, 5.10],
    color: '#a6e3c2',
    stack: '2017Q2',
    showInLegend: false
  }, {
    name: '2017Q3',
    color: '#d9d9d9',
    data: [10, 15, 10, 10, 3.1, 0, 25, 15],
    stack: '2017Q3'
  }, {
    name: '2017Q2',
    color: '#f2f2f2',
    data: [10, 15, 10, 10, 3.0, 2, 25, 9.90],
    stack: '2017Q2'
  }]


});

<script src="https://code.highcharts.com/highcharts.js"></script>


<div id="container" style="min-width: 310px; height: 600px; margin: 0 auto"></div>

我试过把 useHtml 放在几个地方都无济于事。对我做错了什么有任何想法吗？

这里还有一个 fiddle 可以玩:

http://jsfiddle.net/crk3vn76/

编辑

请注意，数据来自数据库，如果我直接将 Δ 放入，它会呈现为 ?

编辑 2

好的，所以如果我在数据库中将我的字符集设置为 utf-8 并将 Δ 直接放在那里，这将起作用。但是，我仍然想弄清楚如何使用 html 字符代码来做到这一点。

Answer 1

创建我自己的 JSFiddle使用，它出现配置 useHTML区分大小写和变化 useHTML至 useHTML正确创建 Δ在类别中

Highcharts.chart('container', {

  chart: {
    type: 'bar'
  },

  title: {
    text: 'Catawba Average Points'
  },

  xAxis: {
    categories: ['Emergency TS Δs', 'Column B', 'Column C', 'Column D', 'Column E', 'Column F', 'Column G'],
    labels: {
      useHTML: true
    }
  },

  plotOptions: {
    bar: {
      stacking: 'normal',
      groupPadding: 0.10,
      pointPadding: 0,
      dataLabels: {
        enabled: true,
        alignt: 'right',
        formatter: function() {
          if (this.y != 0) {
            return this.y;
          }
        }
      }
    }
  },

  series: [{
    name: '(-) Var',
    data: [0, 0, 0, 0, 0, 2, 0, 0],
    color: '#ffa6a6',
    stack: '2017Q3',
    showInLegend: false
  }, {
    name: '(+) Var',
    data: [0, 0, 0, 0, .1, 0, 0, 5.10],
    color: '#a6e3c2',
    stack: '2017Q2',
    showInLegend: false
  }, {
    name: '2017Q3',
    color: '#d9d9d9',
    data: [10, 15, 10, 10, 3.1, 0, 25, 15],
    stack: '2017Q3'
  }, {
    name: '2017Q2',
    color: '#f2f2f2',
    data: [10, 15, 10, 10, 3.0, 2, 25, 9.90],
    stack: '2017Q2'
  }]


});

<script src="https://code.highcharts.com/highcharts.js"></script>


<div id="container" style="min-width: 310px; height: 600px; margin: 0 auto"></div>