web-dev-qa-db-ja.com

Baiduのechartsの周りの空白を最小限に抑える方法

私はBaiduのecharts（本当によく見える）を取り入れようとしています。ただし、タイトルを設定せず、ツールバーを使用しない場合、実際のグラフの周囲には多くの空白があります。グラフ/チャートでより多くのキャンバスを使用する方法はありますか？

コンテナ内に余分なものを追加し、その幅と高さを削除するマージンだけ大きく設定し、「上」と「左」をそれぞれのマージンの負の値に設定してオフセットするという現在のソリューション。エレガントではなく、さらに重要なことに、堅牢ではありませんが、今のところは機能します。

javascriptchartsecharts
17
max.ott

ECharts4.Xでは

他のいくつかのポスターで言及されているように、空白を取り除く正しい方法は、options.gridを変更することです。

https://ecomfe.github.io/echarts-doc/public/en/option.html#grid

grid: {
  left: 0,
  top: 0,
  right: 0,
  bottom: 0
}

ECharts 4では、グリッドプロパティの名前がleft、right、top、およびbottomに変更されました。

私を正しい方向に向けてくれた上記の答えに感謝します！

さらに、上記のようにoption.legendを変更しても、チャートに影響はありませんでした。

20
bjornl

グリッドで定義されたプロパティ（x、y、x2、y2）を使用できます。これらのプロパティはドキュメントに記載されています： http://echarts.baidu.com/doc/doc-en.html#Grid

7
arbc

ECharts3では、オプションgrid.left、grid.top、grid.right、および/またはgrid.bottomを使用できます。ドキュメントによると、左右のデフォルトは10％、上下のデフォルトは60（px）です。

ドキュメント： https://ecomfe.github.io/echarts-doc/public/en/option.html#grid 。

const option = {
  // these are the grid default values
  grid: {
    top:    60,
    bottom: 60,
    left:   '10%',
    right:  '10%',
  },
  // your other options...
}
5
sierrasdetandil

次のように、テーマグリッドオブジェクトに値を追加します。

var theme = {

    grid: {
        x: 40,
        y: 20,
        x2: 40,
        y2: 20
    }

}
5
Silver Ringvee
legend: {
padding: 0,
itemGap: 0,
data: [' ', ' ']
    },

ここでは、凡例のパディングを削除するだけです。指定していなくても、デフォルト値を使用しています。残念ながら、eChartsには、オプションを介してchartAreaを設定する柔軟なオプションがありません。グーグルチャートでは、100％言及することができ、利用可能なすべての領域をカバーします。私は上記の回避策を試しましたが、その後もう少しスペースをカバーすることができました。

0
adityajain019

echartでは、チャートの組み合わせでチャート/グラフを作成できます。凡例など、すべてのチャートセクションの構成が多すぎます... Webサイトで api documantation を参照してください。および 例 ページ（組み合わせ部分）

0
Kamyar Gilak