javascript HTML5 / JS 线性仪表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11608947/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 / JS Linear Gauge
提问by Anand Sunderraman
I would like to display a linear gauge like the one in fusion chartsusing html5 or javascript. On doing a google search i could not find any open source / free linear gauge similar to the one fusion charts have
我想使用 html5 或 javascript显示一个类似于融合图表中的线性仪表。在进行谷歌搜索时，我找不到任何类似于融合图表的开源/免费线性规
回答by zeroin
You can achieve almost the same with http://amcharts.com, here is the code:
您可以使用http://amcharts.com实现几乎相同的效果，这是代码：
<script type="text/javascript">
var chart;
var chartData = [{
category: "",
bad: 75,
moderate: 15,
good: 10
}];
AmCharts.ready(function () {
// SERIALL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "category";
chart.rotate = true;
chart.columnWidth = 1;
// AXES
// Category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridAlpha = 0;
categoryAxis.axisAlpha = 0;
categoryAxis.gridPosition = "start";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.stackType = "100%";
valueAxis.gridAlpha = 0;
valueAxis.autoGridCount = false;
valueAxis.gridCount = 20;
valueAxis.axisAlpha = 1;
chart.addValueAxis(valueAxis);
// GRAPHS
// firstgraph
var graph = new AmCharts.AmGraph();
graph.labelText = "Bad";
graph.valueField = "bad";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.fillColors = ["#d05c4f", "#ffb2a8"];
chart.addGraph(graph);
// second graph
graph = new AmCharts.AmGraph();
graph.labelText = "[[value]]";
graph.valueField = "namerica";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#D8E0BD";
chart.addGraph(graph);
// thirdt graph
graph = new AmCharts.AmGraph();
graph.labelText = "Moderate";
graph.valueField = "moderate";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.fillColors = ["#cba01e", "#fee3a0"];
chart.addGraph(graph);
// fourth graph
graph = new AmCharts.AmGraph();
graph.labelText = "Good";
graph.valueField = "good";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.fillColors = ["#74960c","#d2e594"];
chart.addGraph(graph);
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 500px; height: 100px;"></div>
</body>
And here is the result:
结果如下：
