1. 首頁
  2. 問答
  3. HTML5/JS線性測量儀

HTML5/JS線性測量儀

2012-07-23 84 views
3

我想用html5或javascript顯示線性測量儀，如fusion charts。做了谷歌搜索我找不到一個類似融合圖表有HTML5/JS線性測量儀

來源

2012-07-23 Anand Sunderraman

+0

您在這裏找不到任何有趣的內容：http://webdesignledger.com/resources/13-useful-javascript-solutions-for-charts-and-graphs？或更好[gauge.js]（http://www.netzgesta.de/gauge/） – JMax 2012-07-23 08:38:57

+0

@JMax感謝您指向gauge.js。我的問題與你指出的那個不相似，因爲我在尋找一個像gauge.js – 2012-07-23 09:48:55

回答

5

可以實現幾乎與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>

這裏結果如下：

enter image description here

來源

2012-07-23 16:10:48 zeroin

+0

這樣的線性標尺，非常感謝你的幫助！ – 2012-07-25 11:56:43

+1

感謝您發佈您的答案！請務必仔細閱讀[自助推廣常見問題]（http://stackoverflow.com/faq#promotion）。另請注意，每次鏈接到您自己的網站/產品時，您都必須*發佈免責聲明。 – 2012-11-05 19:22:40

+0

@zeroin我似乎無法讓我的JSFiddle工作。你可以發佈一個JSFiddle嗎？這真的會幫助我。謝謝！ – MadsterMaddness 2014-08-28 17:50:56

相關問題

 相關問題