如何将图表输出导出为 JPEG 或 png 格式？

Question

我已经在我的项目中创建了一个输出图表。图表运行良好。但我不知道如何以 png 或 JPEG 格式导出此图表。

很多从互联网上导出源代码都是使用他们自己的图表。就我而言，我使用了 Highcharts。谁能帮帮我？

这是我的数据库代码

using (SqlConnection sqlcon = new SqlConnection(connstring))
        {
            //canteen 1
            List<SurveyQtnResult> resQ1 = new List<SurveyQtnResult>();
            SqlCommand cmd = new SqlCommand("select ans,isnull(count(ans),0) as cAns from DB_CNTS.dbo.SurveyResultBD_tbl where canteenNo = "+ cNum + " and qNum = 1 and month(dateCreated) = " + month + " and year(dateCreated) = " + year + " group by ans", sqlcon);
            cmd.CommandType = CommandType.Text;
            cmd.CommandTimeout = 1000000;
            sqlcon.Open();  
            SqlDataReader rdr = cmd.ExecuteReader();

            while (rdr.Read())
            {
                SurveyQtnResult q1 = new SurveyQtnResult();
                q1.name = rdr["ans"].ToString();
                q1.y = Convert.ToInt32(rdr["cAns"]);
                resQ1.Add(q1);
            }
            ViewBag.resQ1 = resQ1.ToList();
            ViewBag.DataPoints = JsonConvert.SerializeObject(resQ1.ToList(), _jsonSetting);
        }

这是我的看法

<div class="box col-lg-4">
     <div id="container" style="height:500px; width:500px;"></div>
</div>


<script type="text/javascript">
// Radialize the colors
            Highcharts.setOptions({
                colors: Highcharts.map(Highcharts.getOptions().colors, function (color) {
                    return {
                        radialGradient: {
                            cx: 0.5,
                            cy: 0.3,
                            r: 0.7
                        },
                        stops: [
                            [0, color],
                            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                        ]
                    };
                })
            });

            // Build the chart Q 1
            Highcharts.chart('container', {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                title: {
                    text: 'Question 1 Results'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.y} ',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            },
                            connectorColor: 'silver'
                        }
                    }
                },
                series: [{
                    name: 'VOTES',
                    data: @Html.Raw(ViewBag.DataPoints)
                    }]
            });


</script>

有没有人知道如何实现我想要的输出？

Answer 1

您可以获取图表instance并使用exportChart函数。

cshtml

<button id="btnPng">Export to PNG</button>

脚本

var chart =  Highcharts.chart('container', {}) // your code

$("#btnPng").on('click', function(event) {
    chart.exportChart({type: "image/png"});
});