我必须使用 highcharts 创建一个半圆形 Jmeter 图。我有this one,但这个有一个完整的圆形表盘。需要的是一个半圆形表盘,即,只包含表盘的上部。
ngynwnxp1#
您可以将中心参数添加到窗格部分,
pane : { center: ['50%', '100%'] ... }
请参见修改后的演示http://jsfiddle.net/EjRLw/524/请参阅API highcharts http://api.highcharts.com/highcharts#pane.center
1zmg4dgp2#
pane: { startAngle: -90, endAngle: 90, background:[] },
这样就行了。
wfypjpf43#
像这样改变最后一个功能,您将拥有完整表盘的上部
// Add some life function(chart) { setInterval(function() { var point = chart.series[0].points[0], newVal, inc = 100; newVal = inc; if (newVal < 0 || newVal > 100) { newVal = 50; } point.update(newVal); }, 3000); });
2w2cym1i4#
您可以将背景形状设置为弧形,例如
pane:{ background:{ ... shape:'arc' ... } }
然后使用此CSS删除半圆下方的空间
.chatcontainer > div { margin-bottom: -35% !important } .chatcontainer > div.highcharts-container > svg { margin-bottom: -35%; max-height: 65% !important; }
nom7f22z5#
Highcharts.chart('SemiCircularGauge', { chart: { type: 'gauge', backgroundColor: '#e8e8e8', plotBackgroundColor: { stops: [ [0, '#FFF4C6'], [50, '#FFFFFF'], [100, '#FFF4C6'] ] }, height: 250 }, title: { text: 'Semi Circular Gauge', verticalAlign: 'bottom' }, pane: [{ startAngle: -90, endAngle: 90, background: null, center: ['50%', '100%'], size: 300 }, { startAngle: -90, endAngle: 90, background: null, center: ['50%', '100%'], size: 50 }], exporting: { enabled: true }, tooltip: { enabled: true }, yAxis: [{ min: 0, max: 100, minorTickPosition: 'outside', tickPosition: 'outside', labels: { rotation: 'auto', distance: 20 }, plotBands: [{ from: 0, to: 20, color: "#A45D5B" }, { from: 20, to: 40, color: "#C7A46F" }, { from: 40, to: 60, color: "#D0BF94" }, { from: 60, to: 80, color: "#71AA8D" }, { from: 80, to: 100, color: "#3E7873" }], //pane: 0, title: { text: '<span style="font-size:8px">Semi Circular Gauge</span>', y: -20 } }, { min: 0, max: 100, minorTickPosition: 'outside', tickPosition: 'outside', labels: { rotation: 'auto', distance: 20 }, plotBands: [{ from: 0, to: 20, innerRadius: '100%', outerRadius: '105%', color: "#A45D5B" }, { from: 20, to: 40, innerRadius: '100%', outerRadius: '105%', color: "#C7A46F" }, { from: 40, to: 60, innerRadius: '100%', outerRadius: '105%', color: "#D0BF94" }, { from: 60, to: 80, innerRadius: '100%', outerRadius: '105%', color: "#71AA8D" }, { from: 80, to: 100, innerRadius: '100%', outerRadius: '105%', color: "#3E7873" }], pane: 1, title: { text: '' } }], plotOptions: { gauge: { dataLabels: { enabled: false }, dial: { radius: '100%' } } }, credits: { enabled: false }, series: [{ name: 'Semi Circular Gauge', data: [68], yAxis: 0 }, { name: 'Semi Circular Gauge', data: [68], yAxis: 1 }] }, function (chart) { if (!chart.renderer.forExport) { setInterval(function () { var point = chart.series[0].points[0], newVal, inc = 0; newVal = point.y + inc; if (newVal < 0 || newVal > 100) { newVal = point.y - inc; } point.update(newVal); }, 3000); } });
5条答案
按热度按时间ngynwnxp1#
您可以将中心参数添加到窗格部分,
请参见修改后的演示http://jsfiddle.net/EjRLw/524/
请参阅API highcharts http://api.highcharts.com/highcharts#pane.center
1zmg4dgp2#
这样就行了。
wfypjpf43#
像这样改变最后一个功能,您将拥有完整表盘的上部
2w2cym1i4#
您可以将背景形状设置为弧形,例如
然后使用此CSS删除半圆下方的空间
nom7f22z5#