Question

我想删除高光图顶部的空白区域，并将图表移动到页面顶部，甚至右侧也有图例。

删除此空白区域和/或更改图表高度的最佳方法是什么？

由于

$(function() {
  $('#container').highcharts({
    chart: {
      renderTo: 'container',
      plotBackgroundColor: null,
      plotBackgroundImage: null,
      plotBorderWidth: 0,
      plotShadow: false,
      backgroundColor: 'transparent'
    },
    credits: {
      enabled: false
    },
    tooltip: {
      enabled: false
    },
    title: {
      text: 'Probability of Success<br>Current Plan<br>',
      align: 'center',
      verticalAlign: 'bottom',
      y: -70
    },
    subtitle: {
      text: 'Within Confidence Zone',
      align: 'center',
      verticalAlign: 'bottom',
      y: -30
    },
    pane: {
      center: ['50%','95%'],
      size: '80%',
      startAngle: -90,
      endAngle: 90,
      background: {
        borderWidth: 0,
        backgroundColor: 'transparent',
        innerRadius: '90%',
        outerRadius: '100%',
        shape: 'arc'
      }
    },
    yAxis: [
      {
        lineWidth: 0,
        min: 0,
        max: 90,
        minorTickLength: 0,
        tickLength: 0,
        tickWidth: 0,
        labels: {
          enabled: false
        },
        title: {
          text: '',
          useHTML: true,
          y: 80
        },
        pane: 0
      }
    ],
    plotOptions: {
      series: {
        enableMouseTracking: false
      },
      pie: {
        dataLabels: {
          enabled: true,
          distance: 0,
          style: {
            fontWeight: 'bold',
            color: 'white',
            textShadow: '0px 1px 2px black'
          }
        },
        startAngle: -90,
        endAngle: 90,
        center: ['50%', '100%']
      },
      gauge: {
        dataLabels: {
          enabled: false
        },
        pivot: {
          radius: 125,
          borderWidth: 2,
          borderColor: 'transparent',
          backgroundColor: 'white'
        },
        dial: {
          radius: '100%',
          backgroundColor: 'gray',
          borderColor: 'gray',
          baseWidth: 140,
          topWidth: 1,
          baseLength: '5%', // of radius
          rearLength: '5%'
        }
      }
    },

    series: [{
      "type": "pie",
      "name": "Risk",
      "innerSize": "85%",
      "data": [{
        "y": 40,
        "name": "",
        "color": "#c5e3f0"
      }, {
        "y": 30,
        "name": "",
        "color": "#80c3e0"
      }, {
        "y": 30,
        "name": "",
        "color": "#037dae"
      }]
    }, {
      type: 'gauge',
      name: 'Success',
      data: [25],
      dial: {
        rearLength: 0
      }
    }],
  });
});

Answer 1

我昨天用同样的图表帮助过你！欢迎回来。

<强> Working JSFiddle

有几个关键项目可以控制此类图表中元素的位置。

plotOptions.pie.center应为['50%', '47%']

pane.center应为['50%', '47%']

调整第二个数字（y值）以稍微高一点或多一点。

然后更改您的标题/字幕位置：

title: {
    text: 'Probability of Success<br>Current Plan<br>',
    align: 'center',
    verticalAlign: 'top',
    y: 145
},
subtitle: {
    text: 'Within Confidence Zone',
    align: 'center',
    verticalAlign: 'top',
    y: 187
},

同样，您只是更改y值。请注意，我还将verticalAlign更改为top而不是bottom，以便更好地控制它。

最后，您要设置<div>容器的高度并将其设置为剪切任何额外的空白内容：

<div id="container" style="height: 186px; overflow: hidden" class="left-col" ></div>

有关最终结果，请参阅JSFiddle。

<强> HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

Move Chart To The Top and get rid of this white space
<div class="wrap">
  <div id="container" style="height: 186px; overflow: hidden" class="left-col"></div>
</div>

<强> CODE

$(function() {
  $('#container').highcharts({
    chart: {
      height: 400,
      renderTo: 'container',
      plotBackgroundColor: null,
      plotBackgroundImage: null,
      plotBorderWidth: 0,
      plotShadow: false,
      backgroundColor: 'transparent'
    },
    credits: {
      enabled: false
    },
    tooltip: {
      enabled: false
    },
    title: {
      text: 'Probability of Success<br>Current Plan<br>',
      align: 'center',
      verticalAlign: 'top',
      y: 125
    },
    subtitle: {
      text: 'Within Confidence Zone',
      align: 'center',
      verticalAlign: 'top',
      y: 166
    },
    pane: {
      center: ['50%', '47%'],
      size: '80%',
      startAngle: -90,
      endAngle: 90,
      background: {
        borderWidth: 0,
        backgroundColor: 'transparent',
        innerRadius: '90%',
        outerRadius: '100%',
        shape: 'arc'
      }
    },
    yAxis: [{
      lineWidth: 0,
      min: 0,
      max: 90,
      minorTickLength: 0,
      tickLength: 0,
      tickWidth: 0,
      labels: {
        enabled: false
      },
      title: {
        text: '',
        useHTML: true,
        y: 80
      },
      pane: 0
    }],
    plotOptions: {
      series: {
        enableMouseTracking: false
      },
      pie: {
        dataLabels: {
          enabled: true,
          distance: 0,
          style: {
            fontWeight: 'bold',
            color: 'white',
            textShadow: '0px 1px 2px black'
          }
        },
        startAngle: -90,
        endAngle: 90,
        center: ['50%', '47%']
      },
      gauge: {
        dataLabels: {
          enabled: false
        },
        pivot: {
          radius: 125,
          borderWidth: 2,
          borderColor: 'transparent',
          backgroundColor: 'white'
        },
        dial: {
          radius: '100%',
          backgroundColor: 'gray',
          borderColor: 'gray',
          baseWidth: 140,
          topWidth: 1,
          baseLength: '5%', // of radius
          rearLength: '5%'
        }
      }
    },

    series: [{
      "type": "pie",
      "name": "Risk",
      "innerSize": "85%",
      "data": [{
        "y": 40,
        "name": "",
        "color": "#c5e3f0"
      }, {
        "y": 30,
        "name": "",
        "color": "#80c3e0"
      }, {
        "y": 30,
        "name": "",
        "color": "#037dae"
      }]
    }, {
      type: 'gauge',
      name: 'Success',
      data: [25],
      dial: {
        rearLength: 0
      }
    }],
  });
});

Highcharts高度问题 - 删除顶部的空白区域。见JSFiddle :)

1 个答案: