chart_arc.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <html>
  2. <head>
  3. <link href="../css/c3.css" rel="stylesheet" type="text/css">
  4. </head>
  5. <body>
  6. <div id="chart1"></div>
  7. <div id="chart2"></div>
  8. <div id="chart3"></div>
  9. <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
  10. <script src="../js/c3.js"></script>
  11. <script>
  12. var chart1 = c3.generate({
  13. bindto: '#chart1',
  14. data: {
  15. columns: [
  16. ['data', 80.0]
  17. ],
  18. type: 'gauge',
  19. },
  20. gauge: {
  21. label: {
  22. show: false
  23. },
  24. fullCircle: true,
  25. min: 0,
  26. max: 100
  27. }
  28. });
  29. var chart2 = c3.generate({
  30. bindto: '#chart2',
  31. data: {
  32. columns: [
  33. ['data', 50.0],
  34. ],
  35. type: 'gauge',
  36. },
  37. gauge: {
  38. label: {
  39. show: false
  40. },
  41. fullCircle: true,
  42. min: -100,
  43. max: 100
  44. }
  45. });
  46. var chart3 = c3.generate({
  47. bindto: '#chart3',
  48. data: {
  49. columns: [
  50. ['data', -50.0],
  51. ['data2', 0.0],
  52. ['data3', 50.0],
  53. ],
  54. type: 'gauge',
  55. },
  56. gauge: {
  57. label: {
  58. show: false
  59. },
  60. fullCircle: true,
  61. min: -100,
  62. max: 100
  63. }
  64. });
  65. </script>
  66. </body>
  67. </html>