chart_multi_arc_gauge.html 740 B

1234567891011121314151617181920212223242526272829303132
  1. <html>
  2. <head>
  3. <link href="../css/c3.css" rel="stylesheet" type="text/css">
  4. </head>
  5. <body>
  6. <div id="chart"></div>
  7. <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
  8. <script src="../js/c3.js"></script>
  9. <script>
  10. var chart = c3.generate({
  11. data: {
  12. columns: [
  13. ['padded1', 100],
  14. ['padded2', 90],
  15. ['padded3', 50],
  16. ['padded4', 20]
  17. ],
  18. type: 'gauge',
  19. },
  20. color: {
  21. pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'],
  22. threshold: {
  23. values: [30, 80, 95]
  24. }
  25. },
  26. size: {
  27. height: 320,
  28. }
  29. });
  30. </script>
  31. </body>
  32. </html>