Question

我是图表和js的新手，对js和jqplot没有太多经验，所以也许有人可以帮助我？

我在浏览器窗口调整大小时尝试重新绘制jqplot米尺。我可以在研究期间找到一些似乎工作得很好的例子，但是一旦我自己尝试，我就无法使它工作。

  $(document).ready(function(){

   s1 = [72];

   var plot0 = $.jqplot('chart0',[s1],{
   seriesDefaults: {
       renderer: $.jqplot.MeterGaugeRenderer,
       rendererOptions: {
           label: 'Your Score is <div class="score">' + s1 + '</div>', //Showing the value 
           labelPosition: 'bottom',
           min: 0,
           max: 100,
           intervals:[30, 60, 80, 100],
           intervalColors:['#cc6666', '#E7E658', '#93b75f', '#66cc66'],
           ringColor: '#737373',
           ringWidth: 0.00000000001,           
           background :"transparent",
           intervalInnerRadius: 95,
           hubRadius: 6,
           showTicks: false,
           needleThickness: 5, 
           showTickLabels: false,

       }
   }
   });


 $(window).resize(function() {
      plot0.replot( { resetAxes: true } );
});


});

也许有人能看出我做错了什么？任何帮助都非常感谢！我很沮丧:(

更新

所以我再次阅读所有文件，并在jqplot主页上找到了这个小句子：

“meterGauge图不支持事件。”

所以我猜它无论我做什么都行不通？任何其他想法如何使jqplot仪表响应？

Answer 1

哇，我们终于找到了解决方案。

对于任何对这个主题感兴趣的人，我们最终是这样做的。

<script>

var plot0;
$(window).resize(function(){
    $('#chart0').html('');
  plotGauge();
});

$(document).ready(function(){
  plotGauge();  
});

s1 = [22]

function plotGauge(){
    plot0 = $.jqplot('chart0',[s1],{
  seriesDefaults: {
      renderer: $.jqplot.MeterGaugeRenderer,
      rendererOptions: {
           label: 'Your Score is <div class="score">' + s1 + '</div>', //Showing the value
           labelPosition: 'bottom',
           min: 0,
           max: 100,
           intervals:[30, 60, 80, 100],
           intervalColors:['#cc6666', '#E7E658', '#93b75f', '#66cc66'],
           ringColor: '#737373',
           ringWidth: 0.00000000001,
           background :"transparent",
           intervalInnerRadius: 95,
           hubRadius: 6,
           showTicks: false,
           needleThickness: 5,
           showTickLabels: false,
      }
  }
  });
}

</script>

  <div id="chart0"></div>

Answer 2

上述解决方案存在图形动画（更新数据和重新绘制）的问题，因为当您在调整大小之前更新数据时，它再次显示从开始。因此，您必须在重新绘制图形之前更新数据。

但是我发现了这个图的另一个解决方案（我不知道图中究竟是什么问题），但不知怎的，我通过向重新绘制函数添加一些虚拟数据来管理图重绘。请按照以下代码段进行操作。

$(window).resize(function() {
    plot0.replot( { resetAxes: true, dummy:'dummy' });
});

上面的代码段工作正常，最好不要创建新对象。希望这是有帮助的。

Answer 3

我还遇到了Gauge replot这个问题。

我所做的是将一个虚拟参数传递给replot，它对我有用。

$(window).resize(function() {
    plot0.replot( { resetAxes: true, dummy: 'dummy' } );
});

我没有深入研究jqPlot代码，会在空闲时间打开一个问题。

jqplot Meter Gauge Replot不工作

更新

3 个答案: