JavaScriptで爆速グラフ・チャートが作成できる「CanvasJS」を使ってみた！ : うえぶはっく
ちょっとしたデータをサクッと「グラフ」や「チャート」にして、Webページに素早く公開したい人に最適なJavaScriptライブラリ「CanvasJS」のご紹介です！ 類似のライブラリはいくつかありますが、「CanvasJS」はわずか数行のコードですぐにグラフが作成でき、なおかつ豊富なパラメータをいじることで驚くほど細かいカスタマイズも実現できるのが特徴的です。 今回は、基本的な使い方を中心にご紹介しようと思います！ 必要なファイルを準備しよう！ 「CanvasJS」の本体ファイルは、サイトのトップページからダウンロードできますが、CDN経由からも利用できるようになっています。 https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js これを、HTMLファイルに読み込みます！ // index.html <!d
Javascriptでだけで手軽にグラフが書ける「CanvasJS」の使い方
Javascript「だけで」グラフを描く方法について。 「CanvasJS」というライブラリが便利だったので紹介します。jQueryのプラグインじゃないのが地味なポイント。 この記事のコードをコピペして必要な箇所を書き換えるだけでグラフが書けるようになってるので、いい感じに活用してくださいな。 ライブラリの読み込み <!-- headかグラフ挿入箇所の直前 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js">; </script>; canvasjsのトップページからダウンロードして配置することもできます。 その場合srcを配置した場所に変更してください。 グラフの描画 引数を渡してグラフインスタンスを作成し、renderを呼び出すことで描画されます。 データはポケ
Windy: A Plugin for Swift Content Navigation
This jQuery plugin can be used to swiftly navigate content items. The effect will make the items fly away like a deck of cards caught in a tiny storm. Windy is a jQuery plugin that allows a rapid navigation through a pile of items using some CSS 3D transforms and transitions. The effect of a continuous navigation flow reminds of a deck of cards or sheets flying away, hence the name. This plugin id
jQueryで外部RSSの取得 - HomeMadeGarbage
<script type="text/javascript" src="js/jquery.xdomainajax.js"></script> <script> $(function(){ $.ajax({ url: 'URL', type: 'GET', cache: false, dataType: 'xml', timeout: 5000, success: function(res, status) { if (status === 'success') { // responseText から取得して、xml 形式に変換する必要があり var xmlText = res["responseText"]; var xml = $.parseXML(xmlText); var row = 0; var data = []; var nodeName; $(xml).find('ite
JavaScript(jQuery使用)でRSSフィードを取得するイケてるプラグイン - Qiita
前提 ・最近のBrowser ※以下のBrowserで動作確認しています Chrome最新版 IE11 ・jQuery：比較的新しいやつ ・RSS Feeds Reader Plugin for jQuery 1.20 RSS Feeds Reader Plugin for jQuery - Zazar, Online Business Website Builder http://www.zazar.net/developers/jquery/zrssfeed/ 使い方 jQuery読み込んで、RSSプラグイン読み込んで、任意のブロック要素タグ(div等)に、 RSSプラグインのコンストラクタ呼び出すだけです。 コード例 <html> <head> <link rel="stylesheet" href="jquery.zrssfeed.css"> <script src="//ajax
Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法
Google Feed APIを使わないで相互RSSを表示する方法 「以前の投稿」で紹介しましたが、アクアリウムWikiではGoogle Feed APIを利用して相互RSSを表示していました。 しかし、Google Feed APIはキャッシュ周りに不具合があるようで、古いものが表示されることがありました。 また、近々廃止される方針らしく、いつ停止してもおかしくありません。 そこで「jQueryだけで相互RSSを表示しよう」という試みです。 jQueryでRSSを取得する方法 フィードを取得して、各アイテムを並べ直すだけなら、jQueryで簡単に実装できます。 $.get(FEED_URL, function (data) { $(data).find("entry").each(function () { // or "item" var el = $(this); console.l
slick.jsを利用していて、初期状態をdisplay:none;にしたらレイアウト崩れる – SSSSSN
スライドショーの定番Slick.js、とてもよく活用させていただいている。 普通に使用する中では問題にならないが、場合によりslick部分のコンテンツを初期状態で非表示にしておいて、何かしらのアクションで表示させる場合、幅の取得が上手くいかないのか1枚目の画像（コンテンツ）が上手く表示されない。 ということは、表示のタイミングでSlickをリロードさせればよいっぽいのだけど余り検索しても見つからず。 公式サイトのこれか？っていう部分をはめ込んでみたらうまく動いた。 あっているのかは分からない。 $('.your-element').slick('setPosition'); と思いきやしっかりと答えを教えてくれている方がいらっしゃいました。 http://www.codelab.jp/blog/?p=852 と思ったら今回自分のサイトでは不具合発生。スライドの複製がものすごい量作成されてし
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 | ITハット
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 いろいろなスライダー・カルーセルjQueryプラグインを利用してみて、一番簡単でカスタマイズ性に富んだものがこのslickです。非常に便利な分、注意しなければならないこともあるので、その点も含めて紹介したいと思います。 導入 ダウンロード http://kenwheeler.github.io/slick/ サイト上部のメニューのget it nowをクリックします。 Download Nowをクリックでダウンロードすることができます。 読み込み <head> ... <link href=".../path/to/slick.css" rel="stylesheet"> </head> head 内で slick.css を読み込みます。 ... <script src="https://ajax.google
[slick.js]レスポンシブなスライダー「slick」の機能「unslick」を使ってスマホのみ縦積みにする - Qiita
自分用の備忘録として、、、。 オプションのbreakpointでsettings: 'unslick'だけ設定しても、 スマホからPCサイズにリサイズしたとき、上手く切り替えることができません。 以下の方法で、スマホの場合はカルーセルを解除して縦積みに、 PCサイズの場合はイベントを再登録することができます。 記述はES6とES5の記述で分けています。 記述方法 JavaScript(ES6) (function($) { const NAMESPACE = window.NAMESPACE || {}; NAMESPACE.XXXX = function() { let $win = $(window); const _init = function() { $(function(){ mainVisualSlider.init(); }); }; const mainVisualSli
![[slick.js]レスポンシブなスライダー「slick」の機能「unslick」を使ってスマホのみ縦積みにする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/aac574235ba9d00b5d8e5e088b8100eef25e6732/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCc2xpY2suanMlNUQlRTMlODMlQUMlRTMlODIlQjklRTMlODMlOUQlRTMlODMlQjMlRTMlODIlQjclRTMlODMlOTYlRTMlODElQUElRTMlODIlQjklRTMlODMlQTklRTMlODIlQTQlRTMlODMlODAlRTMlODMlQkMlRTMlODAlOENzbGljayVFMyU4MCU4RCVFMyU4MSVBRSVFNiVBOSU5RiVFOCU4MyVCRCVFMyU4MCU4Q3Vuc2xpY2slRTMlODAlOEQlRTMlODIlOTIlRTQlQkQlQkYlRTMlODElQTMlRTMlODElQTYlRTMlODIlQjklRTMlODMlOUUlRTMlODMlOUIlRTMlODElQUUlRTMlODElQkYlRTclQjglQTYlRTclQTklOEQlRTMlODElQkYlRTMlODElQUIlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTQ2NWRmNmE0NDg0YTQ4NzEzMTNjYjBlNzJlYWM4ZGJm%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzLWthdG8mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWM3MjMxZjQ2ZDRhMmFjN2FjOWVhZjBjM2UwNjc0NGQx%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44Ki44Oz44OG44Kj44O844O744OV44Kh44Kv44OI44Oq44O8%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Df5e3683647643d38abd0f348dc536402)
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
2017年、最新のグリッドライブラリ×7選
データの一覧表示はWebシステムの基本と言えます。そうした機能を作ると、どんどん要望が上がってくるのが常です。データを並べ替えたい、件数を絞りたい、チェックボックスをつけて一括更新したいなどなどです。そうした要望にすべて応えるのはリソースがいくらあっても足りません。 そこで多機能なグリッドを実現できるライブラリをまとめて紹介します。 ceolter/ag-grid: Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components 高機能なグリッドライブラリです。セルの中に画像を表示したり、レーティング表示もできます。表示項目をチェックボックスを使って絞り込んだり、ソート、カラムの入れ替えもできます。インラインでの編集もサポートされています。カラーテーマをサポートしているので
JavaScriptのGridライブラリ決定版 - SlickGrid - Qiita
正直、表示だけするならどれも高機能で大差ないと思う。 ただ、多くのグリッド系ライブラリは、高機能な代わりに遅い＆書きにくかったり、編集機能はあるものの表示→編集モードへの切り替えがもっさりしていたり保存機能が書きにくかったりする。 その中で高速な表示、Excelかのような編集機能を備えているのがSlickGridだ。 「Excelみたいにできないの？」とはよく言われることでその言葉にそんな簡単じゃねーんだよ、とイラッとしたことがある人も多いかと思うが、SlickGridを使うことでお互いストレスフリーな関係を築けるだろう。 では、SlickGridのパワーが実感できる例を紹介したい。 1.パフォーマンス このExampleで表示しているデータは、なんど500,000件である。他のグリッドが数万件表示可能！と言っているそばで、ケタが違う。何せExcel(2003)の限界行より多いんだからビッ
The javascript spreadsheet
Spreadsheet data Create from a HTML table Importing data Headers Nested headers Spreadsheet formulas Formulas Formulas on table footer Spreadsheet columns Column types Advanced dropdown Date and datetime picker Images Richtext column Spreadsheet cells Cell comments Meta information Readonly Spreadsheet integrations Webcomponent React Implementation VUE Implementation Angular Implementation Jquery
<img>タグで埋め込んだSVGファイルの色変更をする JavaScript｜プログラムメモ
ベクターデータのSVGファイルはRetinaディスプレイがどんどん増えてくる今後代替フォーマットが登場しない限り主流になってくると思われます。 ただし、＜img＞タグでSVGファイルを読み込むと色変更がCSSでできません。 （＜SVG＞タグとソースを直接貼り付ける必要がある） そこで desvg.js を使用します。 ● deSVG http://benhowdle.im/deSVG/ imgタグで埋め込んだ外部SVGファイルの色変更が出来るようになります。 <script src="path/to/desvg.js"></script> <script> $(function(){ deSVG('.my_svg', true); }); </script> <img class="my_svg" src="xxxxx.svg" width="26"> .my_svg path{ colo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Beautiful HTML5 Charts & Graphs | 10x Fast | Simple API
GitHub - bayucandra/ckeditor-elfinder: Quickstart/Example of using elFinder with AWS S3 PHP adapter in CKEDITOR
https://blog.mismithportfolio.com/web/20150618flickity
https://blog.mismithportfolio.com/web/20150917slickjs
GitHub - makog/jQuery.flickSimple.js: PCのブラウザ、Androidにも対応したフリック動作
テーブル編集用UIライブラリ、a-table.jsをリリースしました。 | OSS | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
