标签: gauge
带有多个颜色区域的Google Chart Gauge
我正在使用Google Charts API创建计量表.这是一个非常简单有效的API,可以即时创建图表.
这是该图表的文档
https://google-developers.appspot.com/chart/interactive/docs/gallery/gauge
现在,我需要自定义一个小图,这个图表添加的不仅仅是一个绿色区域.例如,我需要一个绿色区域,从0到10,一个从20到30,另一个从40到50,但似乎不可能.
以下是传递给draw()方法以设置绿色区域的选项
var options = {
greenFrom: 0, greenTo: 10
};
我试图传递一个数组作为一个选项,但它显然不起作用.这是我试过的.
var options = {
greenFrom: [0, 20, 40], greenTo: [10, 30, 50]
};
有人有同样的问题吗？
任何帮助都是适用的.
谢谢
推荐指数
解决办法
查看次数
Highcharts测量填充至100%的容器
此功能可通过plotOptions 大小参数用于饼图,但在检查Highcharts API后,Gauge无法使用该大小.
饼图的大小 API条目
考虑到两个图表(圆形)的相似性,我希望会有类似的选项,但是仪表总是填充我无法控制的容器div的某个子集.有没有其他人遇到这个问题或找到了解决方案？
推荐指数
解决办法
查看次数
在HighChart Solid Gauge中隐藏YAxis值
在以下示例中，可以“隐藏” Y轴值-例如-不显示0和200（在左侧）。寻找更清洁的图表。
推荐指数
解决办法
查看次数
中心对齐 Google 仪表图
我正在努力让谷歌仪表图居中对齐。
我想要一行带有居中仪表字符的行和一行带有居中折线图的行。
我尝试了各种选项并使用“display: inline-block”但不起作用。带有折线图的行的行为符合预期。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge', 'corechart']});
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
drawChart();
drawGauges();
}
function drawGauges() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
]);
var w = $( window ).width();
var x = Math.floor(w * 0.3);
console.log("width: " + w + ", x = " + x);
var h = $( window ).height();
var y = Math.floor(h * …推荐指数
解决办法
查看次数
Highcharts规格不显示
我对Highcharts测量仪有问题.实际上,它没有显示,我有一个JS错误.
TypeError: $[b.defaultSeriesType] is not a constructor highcharts.js(第159行)
我有3个标签(使用bootstrap/jquery)和另外两个饼图,这些没有问题.
我不明白,因为我刚从Highcharts网站复制了这个例子.有没有人有任何想法可能导致这个？
编辑:
这是JS的一部分
chart = new Highcharts.Chart({
chart : {
renderTo : 'container',
type : 'gauge',
plotBackgroundColor : null,
plotBackgroundImage : null,
plotBorderWidth : 0,
plotShadow : false
},
title : {
text : 'Speedometer'
},
pane : {
startAngle : -150,
endAngle : 150,
background : [
{
backgroundColor : {
linearGradient : {
x1 : 0,
y1 : 0,
x2 : 0,
y2 : 1
},
stops : [ …推荐指数
解决办法
查看次数
使用D3的仪表图表
我一直在尝试使用d3构建一个仪表,并且我设法破解满足视觉要求的东西 http://bl.ocks.org/ameyms/9140907
然而,这是一个非常非常hacky解决方案,因为我通过反复试验定位针,如果高度和宽度分配百分比值,整个事情就会中断.那我该怎么定位呢？
另外,我怎么能让针旋转？
有任何想法吗？
推荐指数
解决办法
查看次数
Shiny中的Highcharts活动量表
我正在尝试使用rCharts从Highcharts in Shiny制作活动量表.请帮忙.
#server.R
library(shiny)
library(rCharts)
shinyServer(function(input, output) {
output$chart <- renderChart({
a <- Highcharts$new()
a$series(data = 50, type = "solidgauge")
a$addParams(dom = "chart")
return(a)
})
})
#ui.R
library(shiny)
library(rCharts)
shinyUI(bootstrapPage(
chartOutput("chart", "highcharts")
))
推荐指数
解决办法
查看次数
如何使用 HTML CSS 创建半圆/椭圆？就像仪表/车速表一样
我正在尝试做这样的事情：
它不是一个完整的或半圆，并且边缘有一点半径。还需要包含一些点来以百分比显示当前位置。有人可以告诉我如何将类似于以下 3 个想法的东西组合在一起吗？
.circle {
display: flex;
width: 200px;
height: 100px;
border-top-left-radius: 200px;
border-top-right-radius: 200px;
border: 10px solid gray;
border-bottom: 0;
}
.circle>.text {
font-size: 50px;
margin: auto;
}
.circle.gradient {
margin-top: 30px;
border-image-slice: 1;
border-width: 10px;
border-bottom: 0;
border-image-source: linear-gradient(to left, #6ECE34, #E6A749, #E5A749, #F71C1C);
}
.line {
position: relative;
margin-top: 30px;
width: 220px;
height: 10px;
border-radius: 5px;
background: linear-gradient(to left, #6ECE34, #E6A749, #E5A749, #F71C1C);
}
.line>.point {
position: absolute;
top: -3px;
left: 21%;
width: 8px;
height: 16px; …推荐指数
解决办法
查看次数
在android中用画布绘制四分之一规格？
我怎样才能创建与此相同的仪表？这种规格类型是否存在任何库或专家？我使用帆布作为圆规,但我无法创建这个
RectF oval = getOval(canvas, 1);
RectF oval2 = getOval(canvas, 1.1f);
Paint paint = new Paint();
paint.setColor(Color.DKGRAY);
canvas.drawArc(oval2, 180, 90, true, paint);
canvas.drawArc(oval, 180, 90, true, backgroundPaint);
RectF innerOval = getOval(canvas, 0.9f);
canvas.drawArc(innerOval, 180, 90, true, backgroundInnerPaint);
<GaugeView
android:id="@+id/gauge"
android:layout_width="@dimen/panel_gauge_height"
android:layout_height="@dimen/panel_gauge_width"
app:divisions="8"
app:scaleEndValue="8"
app:scaleStartAngle="50"
app:scaleStartValue="0"
app:showNeedle="true"
app:subdivisions="2" />
推荐指数
解决办法
查看次数