1

気圧計に存在する 2 つのシリーズに関連付けられた値を返すツールチップ (echarts) を作成しようとしました。最初の系列には 0 から 100 までの値があり、2 番目の系列には 0 から 60 までの値があります。問題は、0 から 100 までの値のみが考慮され、0 から 60 までは考慮されていないことです。

0 から 100 までの系列の値のみを返しますが、各ポインターに対して両方 (0 から 100 と 0 から 60) を返す必要があることがわかります。

これを解決し、各ポインターで両方の値が返されるようにするにはどうすればよいですか?

現在のコード:

    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.0/echarts.min.js"></script>
      <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
      <title>Gauge Chart</title>
    </head>
    <body>
    
    <div id="gaugespiderinc1" style="height: 400px; margin: 0 auto"></div>
    <input type="range" id="number1" min="0" max="100" step="1" value="50">
    <input type="range" id="number2" min="0" max="100" step="1" value="75">
    
    <script>
              const mychartspider1 = echarts.init(document.getElementById('gaugespiderinc1'));
    
              function updateGaugeSpider1(value1, value2) {
    
                const option = {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            if (params.seriesIndex === 0) {
              return params.seriesName + '<br>' + params.value.toFixed(2) + '%';
            } else if (params.seriesIndex === 1) {
              return params.seriesName + '<br>' + value2.toFixed(0);
            }
          }
        },
                  series: [
                    {
                      type: 'gauge',
                      min: 0,
                      max: 100,
                      splitNumber: 10,
                      radius: '80%',
                      axisLine: {
                        lineStyle: {
                          color: [[1, '#008cba']],
                          width: 3
                        }
                      },
                      splitLine: {
                        distance: -18,
                        length: 18,
                        lineStyle: {
                          color: '#008cba'
                        }
                      },
                      axisTick: {
                        distance: -12,
                        length: 10,
                        lineStyle: {
                          color: '#008cba'
                        }
                      },
                      axisLabel: {
                        distance: -40,
                        color: '#008cba',
                        fontSize: 20,
                        fontFamily: 'Lato' // Adicionado fontFamily
                      },
                      anchor: {
                        show: true,
                        size: 20,
                        itemStyle: {
                          borderColor: '#000',
                          borderWidth: 2
                        }
                      },
                      pointer: {
                        offsetCenter: [0, '10%'],
                        icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                        length: '115%'
                      },
                      detail: {
                        valueAnimation: true,
                        precision: 1,
                        formatter: '{value}%',
                        padding: [2, 1, 5, 2],
                        borderRadius: 5,
                        color: '#333333',
                        fontFamily: 'Lato',
                        backgroundColor: '#92a192'
                      },
                      title: {
                        offsetCenter: [0, '-50%'],
                        fontFamily: 'Lato'
                      },
                      data: [
                        {
                        value: value1,
              name: 'PRESSURE1',
              title: {
              color: 'orange',
              offsetCenter: ['0%', '-50%'],
              fontFamily: 'Lato',
              fontWeight: 'bolder'
              },
              detail: {
              offsetCenter: ['-40%', '110%'],
              fontFamily: 'Lato',
              borderWidth: 3,
              borderColor: 'orange'
              },
              itemStyle: {
              color: 'orange',
              borderWidth: 1,
              borderColor: '#858383'
              }
                        },
            {
              value: value2,
              name: 'PRESSURE2',
              title: {
              color: 'green',
              offsetCenter: ['0%', '-30%'],
              fontFamily: 'Lato',
              fontWeight: 'bolder'
              },
              detail: {
              offsetCenter: ['40%', '110%'],
              fontFamily: 'Lato',
              borderWidth: 3,
              borderColor: 'green',
              color: '#333333'
              },
              itemStyle: {
              color: 'green',
              borderWidth: 1,
              borderColor: '#858383'
              }
            }
                      ]
                    },
                    {
                      type: 'gauge',
                      min: 0,
                      max: 60,
                      splitNumber: 6,
                      axisLine: {
                        lineStyle: {
                          color: [[1, '#858383']],
                          width: 3
                        }
                      },
                      splitLine: {
                        distance: -2,
                        length: 18,
                        lineStyle: {
                          color: '#858383'
                        }
                      },
                      axisTick: {
                        distance: 0,
                        length: 10,
                        lineStyle: {
                          color: '#858383'
                        }
                      },
                      axisLabel: {
                        distance: 10,
                        fontSize: 25,
                        color: '#858383'
                      },
                      pointer: {
                        show: false
                      },
                      title: {
                        show: false
                      },
                      anchor: {
                        show: true,
                        size: 14,
                        itemStyle: {
                          color: 'red'
                        }
                      }
                    }
                  ]
                };
    
                mychartspider1.setOption(option);
              }
    
        function updategaugespider1() {
          $('#sliderspidervalue1').text($('#number1').val());
          $('#sliderspidervalue2').text($('#number2').val());
        }
    
        updategaugespider1();
        updateGaugeSpider1(Number($('#number1').val()), Number($('#number2').val()));
    
        $('#number1').on('input', function () {
          updategaugespider1();
          updateGaugeSpider1(Number($(this).val()), Number($('#number2').val()));
        });
    
        $('#number2').on('input', function () {
          updategaugespider1();
          updateGaugeSpider1(Number($('#number1').val()), Number($(this).val()));
        });
    
        /// event click
        mychartspider1.on('click', { dataIndex: 0 }, function(params) {
      alert('clicked')
    });
    
            </script>
    
    </body>
    </html>  

1 件の回答 1

2

ゲージグラフ(バロメーターやスピードメーターに用いるグラフ)の外側の円と内側の円に異なる目盛が振られていて、現在の針の位置が指し示す目盛それぞれの値を取得したいと解釈して回答します。

それぞれの値を直接取得する方法は見つかりませんでしたが、下記の方法で強引に計算することができます。

  1. チャートのgetOptionseriesの配列を取得する
  2. params.valueで現在の針の位置が示す割合(0~1の値)を取得する
  3. series[n].maxでゲージグラフそれぞれの目盛から最大値を取得し、割合から現在の針の位置が示す値を取得する

コードの変更例

    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        if (params.seriesIndex === 0) {
          // 1. チャートのgetOptionで`series`の配列を取得する
          let series = mychartspider1.getOption().series;
          // 2. params.valueで現在の針の位置が示す割合(0~1の値)を取得する
          let rate = params.value;
          // 3. series[n].maxでゲージグラフそれぞれの目盛から最大値を取得し、割合から現在の針の位置が示す値を取得する
          let outerValue = series[0].max * rate / 100;
          let innerValue = series[1].max * rate / 100;
          // 針をマウスオーバーして表示
          return params.seriesName + '<br>' + rate.toFixed(2) + '%<br>outer value:' + outerValue + '<br>inner value:' + innerValue;

上記の変更を行い、メーターの針にマウスオーバーすることで、現在の針の位置が指し示すそれぞれの値を取得できます。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。