如何配置ZingChart的宽度和高度？

Question

我在试着用ZingChart。正在尝试构建仪表小部件。问题是给那些使用过zingChart的人。如何配置图表周围空间的宽度和高度。所以这就是我要说的：

​

​

白色容器是一个div with 100% width和高度。所有黄色的空格是zingChart的仪表，中间是plotarea。

我想削减所有黄色的空间，在顶部和底部周围的仪表。如何配置？

以下是我在react中的图表配置：

import React from 'react'
import './PlanGauge.sass'
import 'zingchart/es6'
import ZingChart from 'zingchart-react'
import WidgetTile from '../WidgetTile/WidgetTile'

function PlanGauge({ title }) {
  const widgetConfig = {
    minValue: 0,
    maxValue: 150000,
    currentValue: 100000,
  }

  const chartConfig = {
    type: 'gauge',
    'scale-r': {
      aperture: 180,
      values: `${widgetConfig.minValue}:${widgetConfig.maxValue}`,
      ring: {
        size: 12,
        'background-color': '#F2F4F6',
        tick: {
          visible: false,
        },
      },
      center: {
        visible: false,
      },
      tick: {
        visible: false,
      },
      item: {
        //Scale Label Styling
        visible: false,
      },
    },
    plot: {
      size: '100%',
    },
    series: [
      {
        values: [widgetConfig.currentValue],
        'background-color': '#000',
        'border-color': 'red',
        indicator: [4, 4, 0, 0, 0.9],
      },
    ],
    plotarea: {
      marginTop: 0,
      marginBottom: 0,
      backgroundColor: 'yellow',
    },
  }
  return (
    <WidgetTile title={title}>
      <ZingChart data={chartConfig} />
    </WidgetTile>
  )
}

export default PlanGauge

Answer 1

请在ZingChart配置的绘图对象中设置填充，以控制其周围的区域。Plot对象控制图表的样式。

Answer 2

在ZingChart配置中设置边距。绘图区域：{页边距：'0 0 0'，}，

这对我很管用。