Highcharts Gauge стайлинга и добавление CSS элементы

Question

я работаю над модулем датчика, который предназначен выглядеть следующим образом:

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) Наконец, есть ли способ добавить динамический текст, который изменяется в зависимости от результата?

Answer 1

1. Это возможно, но немного сложнее - вы можете изменить путь SVG, прежде чем это средство визуализации с помощью modyfying Axis.getPlotBandPath метода. См. Демонстрацию ниже.

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/