ajax – HighCharts – 如何创建导出EVERYTHING的动态图表

发布时间：2020-12-16 01:35:15 所属栏目：百科来源：网络整理

导读：我试图导出一个动态生成的图表,我注意到有些事情没有被导出.例如,我的图表有PlotBands,它们是动态的,具体取决于显示的数据. 当我建立我的图表时,我遵循所有伟大的HighChart示例的标准代码布局,我立即在文档加载上生成图表.然后在我的代码中,我使用Ajax调用来

我试图导出一个动态生成的图表,我注意到有些事情没有被导出.例如,我的图表有PlotBands,它们是动态的,具体取决于显示的数据.

当我建立我的图表时,我遵循所有伟大的HighChart示例的标准代码布局,我立即在文档加载上生成图表.然后在我的代码中,我使用Ajax调用来加载数据并修改标题,绘图带,自定义文本等.

问题是在初始图表加载后在图表上修改的任何内容都不会导出到图像或PDF.我的PlotBands在Ajax调用期间被添加.它们不能包含在构建在document.load()上的图表对象中.所以他们被HighCharts方便地忽略了.

在我的图表中,我想在24小时内显示不同地点的能源使用情况.用户可以选择不同的日期和不同的网站.需要强调运行时间和每个站点的情节条带具有加载数据的不同运行时间.此外,图表标题显示站点名称,字幕显示平方英尺.

此外,我的代码使用HighCharts renderer text()命令在图形底部绘制一些自定义文本.

我的几乎不起作用的导出的代码看起来像这样：

var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: "ChartContainer",type: "line",title: { text: null },subtitle: { text: null }
        }
    }
});

function UpdateChart() {
    $.ajax({
        url: "/my/url.php",success: function(json) {
            chart.addSeries(json[1]);
            chart.addSeries(json[2]);
            chart.setTitle(json[0].title,json[0].subtitle);
            chart.xAxis[0].addPlotBand({ color: "#FCFFB9",from: json[0].OpenInterval,to: json[0].CloseInterval,label: { text: "Operating Hours",verticalAlign: "bottom",y: -5,style: { fontSize: "8pt",color: "gray" } } });
            chart.renderer.text("Custom Text",50,100);
        }
    });
}

不幸的是,如果用户导出图表,标题,情节乐队和“自定义文本”将不会出现.

是的 – 它的可能和高图支持你在这里提到的动态高图的示例代码 http://jsfiddle.net/vijaykumarkagne/9c2vqq7q/,使用谷歌驱动器中托管的文件的json数据.

$.getJSON("https://b943d995d961c8938d74bf398f8748e2b34864c6.googledrive.com/host/0B_i_hw1oG1HeaU9nMWxfTnJZd1k/data.json",{format:"json"},function(result){
     
               
chart = new Highcharts.Chart({
        chart: {
            zoomType: 'x',type: 'line',renderTo: 'container'
        },title: {
            text: ' '
        },subtitle: {
            text: 'Click and drag in the plot area to zoom in',x: -20
        },xAxis: {
            type: 'datetime',title: {
                text: ' '
            }

        },yAxis: {
            title: {
                text: ' '
            }
        },series:[{
            name: 'Tokyo',data: result
        }]

     });
        });

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://b943d995d961c8938d74bf398f8748e2b34864c6.googledrive.com/host/0B_i_hw1oG1HeaU9nMWxfTnJZd1k/dataEmp.json"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<body>
<div id="container"></div>
</body>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!