Блог

Я хотел бы добавить текст на свой холст поверх легенды и другого текста, который уже реализован в Highcharts; поэтому я подумал добавить некоторые элементы на страницу, на которой у меня есть контейнер диаграммы.

Теперь я не уверен, смогу ли я это сделать, поскольку требуемые мне данные должны поступать из данных, которые Highcharts использует для построения диаграмм (CSV-файлов), таких как среднее, минимальное-максимальное и так далее.

ЕСТЬ ли простой способ сделать это; или я должен просто добавить на свою страницу другой скрипт, написанный на чистом JS, который извлекает данные и представляет их?

Или я могу просто добавить эту информацию непосредственно на холст? Я все еще новичок в HC, поэтому я не уверен, что он может делать и тому подобное.

В общем, после загрузки файла вы можете создать диаграмму и добавить дополнительную информацию на страницу, фрагмент:

 $.get(url, function(data){ 
    createChart(data);
    addExtraInfoToThePage(data);
});
  

Теперь вы можете написать эти две функции и то, что вы хотите.

У вас есть и другое решение: после создания диаграммы вы можете добавить информацию на страницу, фрагмент:

 $.get(url, function(data){ 
    // parse CSV file ...
    $("#contianer").highcharts({
        // set options, like series etc.
    }, function(chart) {
        // add info like min/max/avg to the page here
        // you have access to the series like:
        // chart.series[index]
    });
});
  

Вы можете экспортировать файл в формате png, svg, jpeg или pdf, а затем просто включить его, используя img src= что угодно

Для включения экспорта вам понадобится скрипт, который можно загрузить на странице Highcharts

  <script src="http://code.highcharts.com/modules/exporting.js"></script>
  

Вы также можете использовать библиотеку под названием canvg. Это можно использовать как способ экспорта диаграмм без какого-либо преобразования на стороне сервера. Поскольку Highcharts отображается в формате SVG, нам нужен способ преобразовать его в холст HTML5. Вот скрипка

Существует ряд онлайн-инструментов, которые преобразуют ваш csv в таблицу html, включая textfixer

Здесь размещен файл javascript, который это сделает

Ссылка

Другой способ получить доступ к нужным вам данным — использовать вызовы API диаграмм . После того, как диаграмма была отрисована, вы можете получить ее данные серии, используя chart.series[0].data , или даже минимальные / максимальные значения, используя chart.yaxis[0].getExtremes() .

 var yMax = chart.yAxis[0].getExtremes().dataMax;
var yMin = chart.yAxis[0].getExtremes().dataMin;
  

http://api.highcharts.com/highcharts#Series.data

http://api.highcharts.com/highcharts#Axis.getExtremes

Вам просто нужно убедиться, что диаграмма полностью создана, прежде чем обращаться к этим данным. Одно место для этого в событии загрузки: http://api.highcharts.com/highcharts#chart.events.load .

 $(function () {
// create the chart
$('#container').highcharts({
    chart: {
        events: {
            load: function(event) {
                alert (this.yAxis[0].getExtremes().dataMax);
            }
        }        
    },
    xAxis: {
    },

    series: [{
        animation: false,
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]     
    }]
});
});
  

http://jsfiddle.net/xtckL/