toast gauge chart 만들기

html

`

    <div id="chart-area" style="width: 90vw; height: 90vh"></div>`
    
    

js

const el = document.getElementById('chart-area');
      const data = {
        series: [
          {
            name: 'Speed',
            data: [80],
          },
        ],
      };
      const options = {
      responsive: {
      animation: { duration: 300 },
      rules: [
        {
          condition: ({ width: w }) => {
            console.log("w",w)
            return w <= 200;
          },
          options: {
            xAxis: {
              tick: { interval: 2 },
              label: { interval: 2 }
            },
            legend: {
              align: 'bottom'
            }
          }
        },
        {
          condition: ({ width: w }) => {
           	console.log("w",w)
            return w <= 100;
          },
          options: {
            xAxis: {
              tick: { interval: 6 },
              label: { interval: 6 }
            }
          }
        },
      {
        condition: ({ width: w, height: h }) => {
          return w <= 500 && h <= 400;
        },
        options: {
          chart: { title: '' },
          legend: {
            visible: false
          },
          exportMenu: {
            visible: false
          }
        }
      }
    ]
  },
        chart: { title: 'Speedometer', width: 'auto', height:'auto' },
        circularAxis: { title: 'km/h', scale: { min: 0, max: 100 } },
        series: {
          angleRange: {
            start: 270,
            end: 90,
          },
          dataLabels: { visible: true, offsetY: -200, formatter: (value) => `${value} %` },
        },
        plot: {
          bands: [
            { range: [0, 20], color: '#e4a0c2' },
            { range: [20, 50], color: '#dc4d94' },
            { range: [50, 100], color: '#a90757' },
          ],
        },
        theme: {
          chart: { fontFamily: 'Impact' },
          circularAxis: {
            title: { fontWeight: 500, fontSize: 30, color: '#650434' },
            label: { color: '#650434', fontSize: 15 },
            tick: { strokeStyle: '#650434' },
            strokeStyle: '#650434',
          },
          series: {
            clockHand: {
              color: '#650434',
              baseLine: 10,
            },
            pin: {
              radius: 10,
              color: '#650434',
              borderWidth: 5,
              borderColor: 'rgba(101, 4, 52, 0.3)',
            },
            dataLabels: {
              fontSize: 30,
              color: '#fff',
              textBubble: {
                visible: true,
                backgroundColor: '#650434',
                paddingX: 5,
                paddingY: 5,
              },
            },
          },
          plot: { bands: { barWidth: 50 } },
        },
      };

      const chart = toastui.Chart.gaugeChart({ el, data, options });

바꾸기

 const el = document.getElementById('chart-area');
      const data = {
        series: [
          {
            name: 'warning_level',
            data: [80],
          },
        ],
      };
      const options = {
        chart: {  width: 'auto', height: 'auto' },
        
        series: {
          solid: { clockHand: true },
          angleRange: {
            start: 270,
            end: 90,
          },
        },
        circularAxis: { scale: { min: 0, max: 100 } },
        theme: {
        		chart: { fontFamily: 'Impact' },
            circularAxis: {
            //title: { fontWeight: 500, fontSize: 30, color: '#650434' },
            label: { color: '#000', fontSize: 15 },
            tick: { strokeStyle: '#fff' },
            strokeStyle: '#fff',
            series: {
            clockHand: {
              color: '#26A8FF',
              baseLine: 10,
            },
            pin: {
              radius: 10,
              color: '#26A8FF',
              borderWidth: 15,
              //borderColor: 'rgba(101, 4, 52, 0.3)',
            },
            dataLabels: {
              fontSize: 0,
              color: '#fff',
              textBubble: {
                visible: false,
                paddingX: 5,
                paddingY: 5,
                },
              },
            },
            solid: {
            barWidth: 10,
            lineWidth: 5,
            strokeStyle: '#000',
            backgroundSector: { color: 'rgba(189, 67, 67, 0.1)' },
            hover: {
              color: '#ff0000',
              lineWidth: 5,
              strokeStyle: '#000',
            },
            select: {
              lineWidth: 3,
              strokeStyle: '#000',
            },
          },
          plot: { bands: { barWidth: 40 } },
          },
        },
        responsive: {
        animation: { duration: 300 },
        rules: [
                {
                  condition: ({ width: w }) => {
                    return w <= 200;
                  },
                  options: {
                    xAxis: {
                      tick: { interval: 2 },
                      label: { interval: 2 }
                    },
                  }
                },
                {
                  condition: ({ width: w }) => {
                    return w <= 100;
                  },
                  options: {
                    xAxis: {
                      tick: { interval: 6 },
                      label: { interval: 6 }
                    }
                  }
                },
              {
                condition: ({ width: w, height: h }) => {
                  return w <= 500 && h <= 400;
                },
                options: {
                  chart: { title: '' },
                  legend: {
                    visible: false
                  },
                  exportMenu: {
                    visible: false
                  }
                }
              }
            ]
          },
        
      };

      const chart = toastui.Chart.gaugeChart({ el, data, options });