如何在Highcharts类别标签中显示Δ?

时间:2018-01-18 14:14:50

标签: highcharts

我遇到过一个问题,我很确定这只是我设置对象值的地方,但是,我似乎无法让它工作。

我正在尝试将Δ字符放在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放在几个地方无济于事。对我做错了什么的想法?

这也是一个小提琴:

http://jsfiddle.net/crk3vn76/

修改

注意,数据来自数据库,如果我直接输入Δ,它会呈现为?

编辑2

好的,如果我在数据库中将我的字符集设置为utf-8并将Δ直接放在那里,那么这将有效。但是,我仍然想知道如何使用html字符代码执行此操作。

2 个答案:

答案 0 :(得分:2)

创建我自己的JSFiddle以使用,配置useHTML似乎区分大小写,并且parent_id = request.json['parent_id'] bulk = [{'parent_id': parent_id, 'child_id': x} for x in children_to_insert] # Then we'd bulk operation it into the database: db.engine.execute( parent_has_children.insert(bulk) ) 更改为useHTML正确创建了useHTML

Δ
Highcharts.chart('container', {

  chart: {
    type: 'bar'
  },

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

  xAxis: {
    categories: ['Emergency TS &Delta;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'
  }]


});

答案 1 :(得分:1)

您可以尝试将unicode表示为\u0394。这似乎适用于labels.useHTML: true

Highcharts.chart('container', {

  chart: {
    type: 'bar'
  },

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

  xAxis: {
    categories: ['Emergency TS \u0394s', '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'
  }, {
    name: '(+) Var',
    data: [0, 0, 0, 0, .1, 0, 0, 5.10],
    color: '#a6e3c2',
    stack: '2017Q2'
  }, {
    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'
  }]


});