如何在Highcharts中通过chart.renderer.text添加文本?

时间:2016-06-28 09:54:54

标签: text charts highcharts

我已成功在我的图表中添加其他文字,例如here。这是我通过添加" 功能(图表)"到我的" var chart = new Highcharts.Chart "

$.get('xxx.csv', function(data)
{
    var chart = new Highcharts.Chart({          
        ...
        plotOptions: 
        {
            series: 
            {
                ....
            }
        }
    }, function(chart)
    { 
       chart.renderer.text('The dotted line represents ...', 100, 86)
            .css({
                fontSize: '13px',
                color: '#666666'
            })
            .add();
    }
)};

我目前的格式不同:

$(function () {

    var options = 
    {
        chart: 
        {
            ...
        },
        ...
    };

    $.get('xxx.csv', function(data)
    {   
        var series = {
            data: []
        };

        var temp = []

        // Split the lines
        var lines = data.split('\n');

        // For each line, split the record into seperate attributes
        $.each(lines, function(lineNo, line) {
            var items = line.split(',');

            if (lineNo !== 0) {
                var xValue = +items[0],
                    kwh = parseFloat(items[2] / 1000);
                if (!isNaN(kwh)) {
                    series.data.push({x:xValue,y: kwh, extra:items[1]});
                }
            }
        });


        // Push the completed series
        options.series.push(series);

        new Highcharts.Chart(options);
    });
});

现在,我想知道如何在图表中添加 chart.renderer.text 。我尝试了不同的东西,但没有成功。现在我应该在哪里以及如何为文本添加代码? Here is a fiddle为此。谢谢你的任何提示!

1 个答案:

答案 0 :(得分:1)

您可以在图表的加载事件回调函数中添加文本。您可以在options - options.chart.events对象中添加此函数。 http://api.highcharts.com/highcharts#chart.events.load

options.chart.events = {
  load: function() {
    var chart = this;
    chart.renderer.text('The dotted line represents ...', 100, 186)
      .css({
        fontSize: '13px',
        color: '#666666'
      })
      .add();
  }
}

在这里你可以看到一个如何工作的例子: http://jsfiddle.net/17ed42pa/1/

最好的问候。