如何在HighCharts中显示图例

时间:2016-09-21 16:45:46

标签: jquery highcharts legend highstock

我正在与Hightcharts合作,我试图展示图表的图例,但我不知道为什么不显示它。

  function multipleCharts(current_data) {
  var seriesOptions = [],
    type = ['jobs_running', 'jobs_pending'];
  for (var j = 0; j < current_data.length; j++) {
    var project = current_data[j]['name'];
    for (var i = 0; i < type.length; i++) {
      seriesOptions.push({
        name: project + ' ' + type[i],
        data: current_data[j][type[i]]
      });
    }
  }
  $('#containerChart').highcharts('StockChart', {

    tooltip: {
      formatter: function(){
        s = '';
        $.each(this.points, function(){
          s += '<br/>' + '<span style="color:'+ this.series.color +'; text-transform: uppercase;">' + this.series.name + ':' + '</span>'+ ' ' + Highcharts.numberFormat(this.y,0) + ' jobs';
        });
        return s;
      },
    },
    legend: {
      labelFormatter: function() {
        serie_name = '';
        $.each(this.series, function(){
          serie_name +=  this.series.name + '<br/>';
        });
        return serie_name;
      },
    },
    rangeSelector: {
        buttonTheme: { // styles for the buttons
            fill: 'none',
            stroke: 'none',
            'stroke-width': 0,
            r: 8,
            style: {
                color: '#f47321',
                fontWeight: 'bold'
            },
            states: {
                hover: {
                },
                select: {
                    fill: '#f47321',
                    style: {
                        color: 'white'
                    }
                }
                // disabled: { ... }
            }
        },
        inputBoxBorderColor: '#005030',
        inputBoxWidth: 120,
        inputBoxHeight: 18,
        inputStyle: {
            color: '#005030',
            fontWeight: 'bold'
        },
        labelStyle: {
            color: '#005030',
            fontWeight: 'bold'
        },
        selected: 0
    },
    series: seriesOptions
  });
}

即使我尝试这样的事情,也很容易,并且没有显示任何内容

legend: {
    title: {
        text: 'hola',
        style: {
            fontStyle: 'italic'
        }
    },

},

任何想法! 谢谢你的进步

1 个答案:

答案 0 :(得分:3)

在图例集中启用为true。

legend: {
            enabled: true
        },