Сохранение диаграммы с плавающей точкой в ​​изображение или PDF - PullRequest
Новая
       6

Сохранение диаграммы с плавающей точкой в ​​изображение или PDF

4 голосов
/ 14 марта 2012

Я пытаюсь сохранить диаграмму с плавающей точкой в ​​изображение и в конечном итоге в PDF, но не могу понять, как.

В сети я вижу, что я могу сделать 

canvas.toDataURL("image/png")

Но проблема в том, как мне получить холст в первую очередь, в примерах сказано использовать 

document.getElementById("canvas");

, но для своего кода я использую div с id = "placeholder" (для всехпримеры с плавающей запятой), и в моем html нет ничего помеченного тегом canvas, и это, похоже, не работает.Мой javascript для flot выглядит так: 

$.plot($("#placeholder"), [ d1, d2, d3 ], { series: {
          lines: { show:false },
          bars: { show: true, barWidth: 0.6, horizontal:true } }  });

Есть ли у кого-нибудь рабочий пример, который строит график flot и затем имеет кнопку для сохранения / просмотра в виде изображения или pdf?

Есть нескольковопросы, которые вроде как уже отвечают на это, но, насколько я могу судить, они упускают некоторые ключевые детали - мои извинения за то, что я был полон решимости.

Ответы [ 2 ]

9 голосов
/ 14 марта 2012

Вам не понравится решение flot v 0.7 для этого.Метки не на холсте, это HTML-элементы, которые расположены вокруг него.Так что забудьте о том, чтобы они были записаны на вашем изображении, это не произойдет с flot как есть.

Если вы действительно заинтересованы, то вам нужно получить последнюю версию flot из github для написания меток на холсте (что означает, что вы не сможете стилизовать их вне базовых элементов - т.е. без CSS и без создания ссылок), и тогда у вас все будет в порядке (и не забудьте увидетьновый API.txt ).Если вам нужно получить холст, flot предоставляет метод для этого: 

var plot = $.plot($("#placeholder"), [ d1, d2, d3 ], { series: {
          lines: { show:false },
          bars: { show: true, barWidth: 0.6, horizontal:true } }  });
var ctx = plot.getCanvas();

//do whatever with ctx.toDataURL("image/png")

Единственное изменение, которое я действительно предложил здесь, - это обновить flot до последней (неизданной) версии.

1 голос
/ 09 мая 2012

Я сделал это с помощью стороннего приложения с именем cutyCapt http://cutycapt.sourceforge.net/ Это делает снимки веб-страниц.Поэтому мне пришлось создать фиктивную веб-страницу, содержащую изображение флота, а затем скормить веб-сайт этой функции: 

public bool FlotToImage(string website, string destinationFile)
    {
        string cutyCaptPath = ConfigurationManager.AppSettings["CutyCaptPath"];
        if (!File.Exists(cutyCaptPath))//check if found cutyCapt application
        {
            return false;
        }
        ProcessStartInfo startInfo = new ProcessStartInfo();
        startInfo.FileName = cutyCaptPath; // path to executable file

        startInfo.Arguments = " --url=" + website + " --out=" + destinationFile;// the arguments
        startInfo.CreateNoWindow = true; //optional
        startInfo.WindowStyle = ProcessWindowStyle.Hidden; //optional

        Process process =Process.Start(startInfo);
        process.WaitForExit();
        return true;
    }

Надеюсь, это кому-нибудь поможет.На самом деле это заняло у меня некоторое время, так как мне пришлось также выполнить обход входа на «фиктивный» веб-сайт с помощью flot.

...