Question

我想在我的画布上添加一些文字，在图例和已经在Highcharts中实现的其他文本之上;所以我想在我有图表容器的页面上添加一些元素。

现在我不确定我是否可以这样做，因为我需要的数据需要来自Highcharts用于构建图表（CSV文件）的数据，如平均值，最小值 - 最大值等。

有一种简单的方法吗？或者我应该在我的页面中添加一个不同的脚本，用纯JS编写，检索数据并呈现它？

或者我可以直接在画布上添加这些信息吗？我还是HC的新手，所以我不确定它能做什么等等。

Answer 1

一般情况下，加载文件后，您可以创建图表并在页面上添加额外信息，摘录：

$.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]
    });
});

Answer 2

您可以将文件导出为png，svg，jpeg或pdf，然后只需使用img src = whatever

包含它

要启用导出，您需要一个可以在Highcharts page

上下载的脚本

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

您还可以使用名为canvg的库。这可以用作导出图表的方式，而不涉及任何服务器端转换。由于Highcharts是在SVG中绘制的，因此我们需要一种方法将其转换为HTML5画布。这是fiddle

有许多在线工具可以将您的csv转换为包含textfixer

的html表格

有一个javascript文件可以发布here

Reference

Answer 3

您可以使用图表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

您只需确保在访问此数据之前完全创建了图表。在load事件中执行此操作的一个地方： 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/

我可以在网页上添加我从Highcharts功能获得的数据吗？

3 个答案: