問題タブ [chartist.js]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - chartist を使用した棒グラフの凡例の配置
chartist を使用して棒グラフの凡例を作成しようとしています。凡例に chartist プラグインを使用しましたが、グラフの下部に揃えることができません。(cssで使ってみましたが、変更を反映できませんでした。)
HTML :
JS:
伝説.JS:
また、バーの上に y 軸の値を追加する方法を教えてください。以下の css ファイルを使用してみましたが、ラベルを取得できません (Chartist.plugins.ctPointLabels に似ています) が、折れ線グラフにのみ適用できるようです。
CSS:
前もって感謝します。
angularjs - ChartistJS : jQuery ソリューションを AngularJS に変換する
Angular JS アプリのチャートに Chartist JS を使用しています。問題は、ここでこれを見ていることです。この問題を強調するJS ビンがあります。著者はそれに対する解決策を提供します。解決策は、Jquery で簡単に DOM 操作を行うことです。ただし、AngularJS で DOM を操作する方法は、ディレクティブを使用することです。ここで Angular JS の同じ問題を強調するplunker を作成しましたが、著者が提供したソリューションを Angular コードに組み込む方法について混乱しています。ここに解決策があります
編集: 要求に応じて JSFiddle が更新されるため、私がやろうとしていることは次のとおりです。3 つの異なるタブと 3 つの異なるグラフがあり、それらをクリックすると、それぞれのグラフが表示されます。タブの動作を可能にするために、スコープとモデルを使用して基本的なコードを作成しました。これにより、タブの変更が容易になります。問題は、チャートが最初またはデフォルトのタブ用に作成されているが、2 番目と 3 番目のタブ用に作成されていないことです。著者によって提供された解決策がありますが、AngualrJS でそれを実装する方法がわかりません
javascript - Polymer で動的に生成された SVG のスタイリング
Javascript グラフ作成ライブラリ Chartist を Polymer 要素でラップしようとしています。スタイリングを除いて、すべてが期待どおりに機能します。チャートはスタイルが設定されていないように見えます (css がロードされていない場合のすべてのチャーティストの例と同じです)。
https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-modulesで説明されているようにスタイル モジュールを作成し、リンク[rel=import] とスタイルの両方を使用して要素に含めました。タグを追加し、 chartist.cssのすべての内容をコピーして style-module に貼り付けました。Firefox/Chrome では動作しません。
スタイル モジュールが読み込まれて処理されていることを証明するために、ul#message タグを含め、ディレクティブでスタイルを設定しました。魅力のように機能します。
問題は、チャーティストが SVG チャートを作成することだと思います。SVG のスタイリングの扱い方を知っている人はいますか?
これまでの私のコードは次のとおりです。
スタイル モジュール:
ポリマー要素:
javascript - SVG から画像への変換に関する問題
次のSVG文字列をJSで画像に変換しようとしています:
たとえば、 simg.jsやこのスクリプトなど、見つけられるものはすべて試しました。
しかし、生成された画像は常に「壊れた」ものです。つまり、まったく表示されません。単純な SVG 文字列を使用した同じスクリプトは問題なく機能します。
chartist.js によって生成され、ブラウザーに適切に表示される文字列の何が問題なのか正確にはわかりませんが、原因は<foreignObject>
要素にあるようです。それらを削除した場合、問題なく動作します。
そのSVG文字列をJSで画像に変換する方法はありますか?
chartist.js - チャーティストのテキストの色とサイズを変更する
グラフのフォント サイズが小さすぎて、特定の色で読みにくい。これらの属性を変更する方法はありますか?
私はこれを行うことができますが、パイ全体を赤くしますが、色やフォントサイズを設定しても変更はありません:
chartist.js - chartist.js ラベルと円のパーセンテージを含む円グラフ
chartist.js を使用して、ラベル (凡例に表示されます) と円自体のパーセンテージを使用して円グラフを作成したいと考えています。
これが円グラフです。パーセンテージ値をピースに追加したい。http://i.stack.imgur.com/SiIKb.png
ここ ( https://gionkunz.github.io/chartist-js/examples.html ) は、円グラフにパーセンテージを表示した例です。しかし、これはラベルを追加しない場合にのみ機能します。
データにラベルを追加すると (例: labels: ['Dog','Cat','Cow','Snake',],)、結果は "NaN%" と表示されます。
円自体のパーセンテージを確認し、ラベル (凡例用) をデータに追加したいと考えています。
これは可能ですか?