Question

我在高图中有一个仪表图表，这里我想在旋转时根据值改变针的颜色。

以下是我的代码：

$(function() {

  $('#container').highcharts({
      chart: {
        type: 'gauge',
      },
      title: {
        text: 'PV Generation'
      },
      tooltip: {
        enabled: false
      },
      pane: {
        center: ['50%', '55%'],
        size: '75%',
        startAngle: -100,
        endAngle: 100,
        background: {
          backgroundColor: '#aaaaaa',
          innerRadius: '95%',
          outerRadius: '100%',
          shape: 'arc',
        },
      },

      yAxis: [{
        lineWidth: 0,
        min: 0,
        max: 900,
        tickInterval: 50,
        tickPosition: 'outside',
        minorTickPosition: 'outside',
        tickLength: 15,
        minorTickLength: 5,
        labels: {
          distance: 25,
        },
        offset: 5,
        endOnTick: false,
        title: {
          y: -70
        },

        plotOptions: {
          solidgauge: {
            dataLabels: {
              y: 5,
              borderWidth: 0,
              useHTML: true
            }
          }
        },
        plotBands: [{
          from: 0,
          to: 250,
          color: '#55BF3B' // green
        }, {
          from: 250,
          to: 700,
          color: '#DDDF0D', // yellow
          series: [{
            data: [{
              id: 'hour',
              y: 400,
              yAxis: 0,
              dial: {
                backgroundColor: '#000000',
                color: 'red',
                radius: '100%',
                baseWidth: 10,
                baseLength: '5%',
                baseWidth: 15,
                rearLength: '0%',
              }
            }]
          }]
        }, {
          from: 700,
          to: 900,
          color: '#DF5353' // red
        }]

      }],
      series: [{
        name: 'Speed',
        data: [{
          y: 450
        }]
      }]
    },
    // Add some life
    function(chart) {
      setInterval(function() {
        var point = chart.series[0].points[0],
          newVal,
          inc = Math.round((Math.random() - 0.5) * 20);

        newVal = point.y + 4 * inc;
        if (newVal < 0 || newVal > 900) {
          newVal = point.y - 4 * inc;
        }

        chart.yAxis[0].removePlotBand('plot-band-1');
        chart.yAxis[0].addPlotBand({
          from: 0,
          to: newVal,
          // color: '#000000',
          thickness: '10%',
          id: 'plot-band-1'
        });
        point.update(newVal);
      }, 4000);

    });


  $("#container").find("circle").attr("r", 15);
  $("#container").find("circle").attr("fill", "red");
  // $("#container").find("series").data("fill", "black");
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Answer 1

您可以通过更改更新代码的某些部分来执行此操作。我做了以下事情：

删除point.update(newVal)

根据值是增加还是减少，添加更新针，枢轴和值的更新：

if (inc > 0) {
  chart.series[0].update({
    dial: {
      backgroundColor: 'green',
    },
    pivot: {
      backgroundColor: 'green'
    },
    data: [{
      y: newVal
    }]
  }, true);
} else {
  chart.series[0].update({
    dial: {
      backgroundColor: 'red',
    },
    pivot: {
      backgroundColor: 'red'
    },
    data: [{
      y: newVal
    }]
  }, true);
}

此外，我删除了这个：

$("#container").find("circle").attr("r", 15);
$("#container").find("circle").attr("fill", "red");

而是把它放在系列定义中：

series: [{
  name: 'Speed',
  data: [{
    y: 450
  }],
  pivot: {
    radius: 15,
    backgroundColor: 'red'
  }
}]

这样它就是一个高图属性，在我们更新系列时不会被覆盖。

API参考： series.gauge和Highcharts.update

完整的工作示例：

＆＃13;

$(function() {

  $('#container').highcharts({
      chart: {
        type: 'gauge',
      },
      title: {
        text: 'PV Generation'
      },
      tooltip: {
        enabled: false
      },
      pane: {
        center: ['50%', '55%'],
        size: '75%',
        startAngle: -100,
        endAngle: 100,
        background: {
          backgroundColor: '#aaaaaa',
          innerRadius: '95%',
          outerRadius: '100%',
          shape: 'arc',
        },
      },
      yAxis: [{
        lineWidth: 0,
        min: 0,
        max: 900,
        tickInterval: 50,
        tickPosition: 'outside',
        minorTickPosition: 'outside',
        tickLength: 15,
        minorTickLength: 5,
        labels: {
          distance: 25,
        },
        offset: 5,
        endOnTick: false,
        title: {
          y: -70
        },
        plotOptions: {
          solidgauge: {
            dataLabels: {
              y: 5,
              borderWidth: 0,
              useHTML: true
            }
          }
        },
        plotBands: [{
          from: 0,
          to: 250,
          color: '#55BF3B' // green
        }, {
          from: 250,
          to: 700,
          color: '#DDDF0D', // yellow
          series: [{
            data: [{
              id: 'hour',
              y: 400,
              yAxis: 0,
              dial: {
                backgroundColor: '#000000',
                color: 'red',
                radius: '100%',
                baseWidth: 10,
                baseLength: '5%',
                baseWidth: 15,
                rearLength: '0%',
              }
            }]
          }]
        }, {
          from: 700,
          to: 900,
          color: '#DF5353' // red
        }]
      }],
      series: [{
        name: 'Speed',
        data: [{
          y: 450
        }],
        pivot: {
          radius: 15,
          backgroundColor: 'red'
        }
      }]
    },
    // Add some life
    function(chart) {
      setInterval(function() {
        var point = chart.series[0].points[0],
          newVal,
          inc = Math.round((Math.random() - 0.5) * 20);
        newVal = point.y + 4 * inc;
        if (newVal < 0 || newVal > 900) {
          newVal = point.y - 4 * inc;
        }
        chart.yAxis[0].removePlotBand('plot-band-1');
        chart.yAxis[0].addPlotBand({
          from: 0,
          to: newVal,
          // color: '#000000',
          thickness: '10%',
          id: 'plot-band-1'
        });
        if (inc > 0) {
          chart.series[0].update({
            dial: {
              backgroundColor: 'green',
            },
            pivot: {
              backgroundColor: 'green'
            },
            data: [{
              y: newVal
            }]
          }, true);
        } else {
          chart.series[0].update({
            dial: {
              backgroundColor: 'red',
            },
            pivot: {
              backgroundColor: 'red'
            },

            data: [{
              y: newVal
            }]
          }, true);
        }
      }, 4000);

    });


  //$("#container").find("circle").attr("r", 15);
  //$("#container").find("circle").attr("fill", "red");
  // $("#container").find("series").data("fill", "black");
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

＆＃13;

编辑以处理每种颜色的范围：

即。 0 - 250：绿色， 250-700：黄色， 700-900：红色

＆＃13;

$(function() {

  $('#container').highcharts({
      chart: {
        type: 'gauge',
      },
      title: {
        text: 'PV Generation'
      },
      tooltip: {
        enabled: false
      },
      pane: {
        center: ['50%', '55%'],
        size: '75%',
        startAngle: -100,
        endAngle: 100,
        background: {
          backgroundColor: '#aaaaaa',
          innerRadius: '95%',
          outerRadius: '100%',
          shape: 'arc',
        },
      },
      yAxis: [{
        lineWidth: 0,
        min: 0,
        max: 900,
        tickInterval: 50,
        tickPosition: 'outside',
        minorTickPosition: 'outside',
        tickLength: 15,
        minorTickLength: 5,
        labels: {
          distance: 25,
        },
        offset: 5,
        endOnTick: false,
        title: {
          y: -70
        },
        plotOptions: {
          solidgauge: {
            dataLabels: {
              y: 5,
              borderWidth: 0,
              useHTML: true
            }
          }
        },
        plotBands: [{
          from: 0,
          to: 250,
          color: '#55BF3B' // green
        }, {
          from: 250,
          to: 700,
          color: '#DDDF0D', // yellow
          series: [{
            data: [{
              id: 'hour',
              y: 400,
              yAxis: 0,
              dial: {
                backgroundColor: '#000000',
                color: 'red',
                radius: '100%',
                baseWidth: 10,
                baseLength: '5%',
                baseWidth: 15,
                rearLength: '0%',
              }
            }]
          }]
        }, {
          from: 700,
          to: 900,
          color: '#DF5353' // red
        }]
      }],
      series: [{
        name: 'Speed',
        data: [{
          y: 450
        }],
        dial: {
              backgroundColor: '#DDDF0D',
            },
        pivot: {
          radius: 15,
          backgroundColor: '#DDDF0D'
        }
      }]
    },
    // Add some life
    function(chart) {
      setInterval(function() {
        var point = chart.series[0].points[0],
          newVal,
          inc = Math.round((Math.random() - 0.5) * 20);
        newVal = point.y + 4 * inc;
        if (newVal < 0 || newVal > 900) {
          newVal = point.y - 4 * inc;
        }
        chart.yAxis[0].removePlotBand('plot-band-1');
        chart.yAxis[0].addPlotBand({
          from: 0,
          to: newVal,
          // color: '#000000',
          thickness: '10%',
          id: 'plot-band-1'
        });
        if (newVal < 250) {
          chart.series[0].update({
            dial: {
              backgroundColor: 'green',
            },
            pivot: {
              backgroundColor: 'green'
            },
            data: [{
              y: newVal
            }]
          }, true);
        } else if(newVal > 250 && newVal < 700){
          chart.series[0].update({
            dial: {
              backgroundColor: '#DDDF0D',
            },
            pivot: {
              backgroundColor: '#DDDF0D'
            },
            data: [{
              y: newVal
            }]
          }, true);
        } else {
          chart.series[0].update({
            dial: {
              backgroundColor: 'red',
            },
            pivot: {
              backgroundColor: 'red'
            },

            data: [{
              y: newVal
            }]
          }, true);
        }
      }, 4000);

    });


  //$("#container").find("circle").attr("r", 15);
  //$("#container").find("circle").attr("fill", "red");
  // $("#container").find("series").data("fill", "black");
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

＆＃13;

Answer 2

您可以使用events.render函数来检测y的值并相应地更改指针的颜色

更新现有代码

   events: {
      render: function() {
        newVal = this.series[0].data[0].y;
        graph = this.series[0].data[0].graphic;
        if (newVal >= 0 && newVal < 250) {
          graph.attr({
            fill: '#55BF3B'
          });
          this.series[0].pivot.attr({
            fill: '#55BF3B'
          });
        }
        if (newVal >= 250 && newVal < 700) {
          graph.attr({
            fill: '#DDDF0D'
          });
          this.series[0].pivot.attr({
            fill: '#DDDF0D'
          });
        }
        if (newVal >= 700 && newVal < 900) {
          graph.attr({
            fill: '#DF5353'
          });
          this.series[0].pivot.attr({
            fill: '#DF5353'
          });
        }
      }
    }

$(function() {

  $('#container').highcharts({
      chart: {
        type: 'gauge',
        events: {
          render: function() {
            newVal = this.series[0].data[0].y;
            graph = this.series[0].data[0].graphic;
            if (newVal >= 0 && newVal < 250) {
              graph.attr({
                fill: '#55BF3B'
              });
              this.series[0].pivot.attr({
                fill: '#55BF3B'
              });
            }
            if (newVal >= 250 && newVal < 700) {
              graph.attr({
                fill: '#DDDF0D'
              });
              this.series[0].pivot.attr({
                fill: '#DDDF0D'
              });
            }
            if (newVal >= 700 && newVal < 900) {
              graph.attr({
                fill: '#DF5353'
              });
              this.series[0].pivot.attr({
                fill: '#DF5353'
              });
            }
          }
        }
      },
      title: {
        text: 'PV Generation'
      },
      tooltip: {
        enabled: false
      },
      pane: {
        center: ['50%', '55%'],
        size: '75%',
        startAngle: -100,
        endAngle: 100,
        background: {
          backgroundColor: '#aaaaaa',
          innerRadius: '95%',
          outerRadius: '100%',
          shape: 'arc',
        },
      },

      yAxis: [{
        lineWidth: 0,
        min: 0,
        max: 900,
        tickInterval: 50,
        tickPosition: 'outside',
        minorTickPosition: 'outside',
        tickLength: 15,
        minorTickLength: 5,
        labels: {
          distance: 25,
        },
        offset: 5,
        endOnTick: false,
        title: {
          y: -70
        },

        plotOptions: {
          solidgauge: {
            dataLabels: {
              y: 5,
              borderWidth: 0,
              useHTML: true
            }
          }
        },
        plotBands: [{
          from: 0,
          to: 250,
          color: '#55BF3B' // green
        }, {
          from: 250,
          to: 700,
          color: '#DDDF0D', // yellow
          series: [{
            data: [{
              id: 'hour',
              y: 400,
              yAxis: 0,
              dial: {
                backgroundColor: '#000000',
                color: 'red',
                radius: '100%',
                baseWidth: 10,
                baseLength: '5%',
                baseWidth: 15,
                rearLength: '0%',
              }
            }]
          }]
        }, {
          from: 700,
          to: 900,
          color: '#DF5353' // red
        }]

      }],
      series: [{
        name: 'Speed',
        data: [{
          y: 450
        }],
        pivot: {
          radius: 15,
        }
      }]
    },
    // Add some life
    function(chart) {
      setInterval(function() {
        var point = chart.series[0].points[0],
          newVal,
          inc = Math.round((Math.random() - 0.5) * 20);

        newVal = point.y + 4 * inc;
        if (newVal < 0 || newVal > 900) {
          newVal = point.y - 4 * inc;
        }

        chart.yAxis[0].removePlotBand('plot-band-1');
        chart.yAxis[0].addPlotBand({
          from: 0,
          to: newVal,
          // color: '#000000',
          thickness: '10%',
          id: 'plot-band-1'
        });
        point.update(newVal);


      }, 1000);

    });


  // $("#container").find("circle").attr("r", 15);
  // $("#container").find("circle").attr("fill", "red");
  // $("#container").find("series").data("fill", "black");
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Fiddle演示

如何根据highcharts中的值更改仪表仪表颜色

2 个答案: