ホームページ > 記事 > ウェブフロントエンド > xCharts-D3ベースのJavaScriptチャートライブラリコード詳細説明(写真)
xCharts - D3 ベースの JavaScript チャート ライブラリ コードの詳細な説明 (画像)
xCharts は、D3 のチャート タイプに基づく JavaScript チャート ライブラリであり、豊富なチャート テーマ スタイルを備えています。 、とても美しいです。さらに、xCharts のデザインは非常に柔軟で、構成は比較的シンプルで、読み込み速度も悪くありません。非常にオープンでカスタマイズ可能な JavaScript チャート アプリケーションです。
はJavaScriptをベースとしているため、ブラウザさえあれば利用でき、プラットフォーム互換性も良好です。
オープンでカスタマイズ可能なため、構成は非常に柔軟です。
SVG形式をサポートしているため、チャートデータも簡単にエクスポートできます。
単純な縦棒グラフ
JavaScript コード:
var data = { "xScale": "ordinal", "yScale": "linear", "main": [ { "className": ".pizza", "data": [ { "x": "Pepperoni", "y": 4 }, { "x": "Cheese", "y": 8 } ] } ] }; var myChart = new xChart('bar', data, '#example1');
レンダリング:
線形グラフ
JavaScript コード:
var data = { "xScale": "time", "yScale": "linear", "type": "line", "main": [ { "className": ".pizza", "data": [ { "x": "2012-11-05", "y": 1 }, { "x": "2012-11-06", "y": 6 }, { "x": "2012-11-07", "y": 13 }, { "x": "2012-11-08", "y": -3 }, { "x": "2012-11-09", "y": -4 }, { "x": "2012-11-10", "y": 9 }, { "x": "2012-11-11", "y": 6 } ] } ] }; var opts = { "dataFormatX": function (x) { return d3.time.format('%Y-%m-%d').parse(x); }, "tickFormatX": function (x) { return d3.time.format('%A')(x); } }; var myChart = new xChart('line', data, '#example3', opts);
レンダリング:
アニメーション棒グラフ
JavaScript コード:
var errorBar = { enter: function (self, storage, className, data, callbacks) { var insertionPoint = xChart.visutils.getInsertionPoint(9), container, // Map each error bar into 3 points, so it's easier to draw as a single path // Converts each point to a triplet with y from (y - e) to (y + e) // It would be better to use the `preUpdateScale` method here, // but for this quick example, we're taking a shortcut eData = data.map(function (d) { d.data = d.data.map(function (d) { return [{x: d.x, y: d.y - d.e}, {x: d.x, y: d.y}, {x: d.x, y: d.y + d.e}]; }); return d; }), paths; // It's always a good idea to create containers for sets container = self._g.selectAll('.errorLine' + className)
xChart.setVis('error', errorBar);
var data = { "xScale": "ordinal", "yScale": "linear", "main": [ { "className": ".errorExample", "data": [ { "x": "Ponies", "y": 12 }, { "x": "Unicorns", "y": 23 }, { "x": "Trolls", "y": 1 } ] } ], "comp": [ { "type": "error", "className": ".comp.errorBar", "data": [ { "x": "Ponies", "y": 12, "e": 5 }, { "x": "Unicorns", "y": 23, "e": 2 }, { "x": "Trolls", "y": 1, "e": 1 } ] } ] };
レンダリング:
Web アプリケーションでグラフを使用する必要がある場合、xCharts は非常に便利です。試してみることができます。
以上がxCharts-D3ベースのJavaScriptチャートライブラリコード詳細説明(写真)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。