Highcharts仪表的造型和添加CSS元素

  • Z时代
  • 2024-01-10
  • 分类：问答

我工作其目的看作是一个量表模块如下：Highcharts仪表的造型和添加CSS元素

Hydration Guage

目前，我有以下模式工作：

（请参考捣鼓最更新的代码）

GaugeFiddle

$(function() { 
    var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     type: 'gauge' 
    }, 
    title: { 
     text: 'Hydration Index' 
    }, 
    pane: { 
     startAngle: -140, 
     endAngle: 140, 
     size: 200, 
     background: { 
     backgroundColor: { 
      linearGradient: [0, 300, 300, 300], 
      stops: [ 
      [0, 'rgb(152, 230, 230)'], 
      [1, 'rgb(0, 0, 10)'] 
      ] 
     }, 
     innerRadius: '70%', 
     outerRadius: '100%', 
     shape: 'arc', 
     } 
    }, 
    yAxis: { 
     reversed: true, 
     min: 0, 
     max: 100, 
     plotBands: [{ // mark the weekend 
     }], 
     tickInterval: 600 
    }, 
    plotOptions: { 
     gauge: { 
     dataLabels: { 
      enabled: false 
     }, 
     dial: { 
      radius: '100%', 
      backgroundColor: 'black', 
      borderColor: 'white', 
      borderWidth: 0.5, 
      rearLength: 0, 
      baseWidth: 10, 
      topWidth: 1, 
      baseLength: '0%' 
     }, 
     pivot: { 
      radius: 0 
     } 
     }, 
    }, 
    series: [{ 
     name: 'Hydration percent', 
     data: [20], 
    }], 
    credits: { 
     enabled: false 
    }, 
    }); 
});

1）如何在测量仪的一侧添加这些弯曲边缘？

2）我可以将针的方向从顺时针逆时针旋转到逆时针吗？目前，我已经将yaxis颠倒过来，所以图表的工作原理应该如何，但是它直观地从高处开始并从那里开始（因此，如果我的图表从0到100，并且我的数据值是10，它将开始在100处，默认为10）。

3）最后，我有什么办法可以添加根据结果改变的动态文本吗？

回答：

  1. 这是可能的，但有点棘手 - 这是通过渲染modyfying Axis.getPlotBandPath方法之前，可以修改SVG的路径。看下面的演示。

  2. 你可以简单地禁用初始动画和设定值= 0。然后，在回调，更新指向正确的值：

    series: [{ 
        name: 'Hydration percent', 
        animation: false, 
        data: [ 
        0 
        ] 
    }],

    而且回调：

    function(chart) { // on complete 
        chart.series[0].points[0].update(80); 
        ... 
    }

  3. 这不是使用Renderer.text时出现问题。例如：

    chart.myLabel = chart.renderer.text('Test', 10, 10).add(); // store in some variable

    然后更新文本：

    chart.myLabel.attr({ 
        text: 'Nice!' 
    });

这里是一个工作演示：http://jsfiddle.net/8p8ab8bg/

以上是 Highcharts仪表的造型和添加CSS元素 的全部内容， 来源链接： utcz.com/qa/265721.html

回到顶部