하이 차트 맞춤 차트

맞춤 차트를 개발하는 데 Highcharts을 사용하고 있습니다. 여기에 내 자신이받은 것입니다 jsfiddle.하이 차트 맞춤 차트

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'area', 
      inverted: true, 
      height: 700, 
      width: 780, 
      marginRight: 20 
     }, 
     credits: { 
      enabled: false 
     }, 
     colors: [ 
      '#828385', 
      '#3AAFC1', 
      '#F87D2A', 
      '#80699B', 
      '#3D96AE', 
      '#DB843D', 
      '#92A8CD', 
      '#A47D7C', 
      '#B5CA92'], 
     exporting: { 
      enabled: false 
     }, 
     title: { 
      text: ' ' 
     }, 
     subtitle: { 
      style: { 
       position: 'absolute', 
       right: '0px', 
       bottom: '10px' 
      } 
     }, 
     legend: { 
      itemDistance: 30, 
      x: 180, 
      verticalAlign: 'top' 
     }, 
     xAxis: { 
      categories: ["Label1", "Label2", "Label3", "Label4", "Label5", "Label6", "Label7", "Label8", "Label9", "Label10"], 
      offset: -410, 
      labels: { 
       overflow: 'justify' 
      }, 
      plotLines: [{ 
       color: '#A0A0A0', 
       width: 1, 
       value: 0 

      }, { 
       color: '#A0A0A0', 
       width: 1, 
       value: 1 

      }, { 
       color: '#A0A0A0', 
       width: 1, 
       value: 2 

      }, { 
       color: '#A0A0A0', 
       width: 1, 
       value: 3 

      }, { 
       color: '#A0A0A0', 
       width: 1, 
       value: 4 

      }, { 
       color: '#A0A0A0', 
       width: 1, 
       value: 5 

      }, { 
       color: '#A0A0A0', 
       width: 1, 
       value: 5 

      }, { 
       color: '#A0A0A0', 
       width: 1, 
       value: 6 

      }, { 
       color: '#A0A0A0', 
       width: 1, 
       value: 7 

      }, { 
       color: '#A0A0A0', 
       width: 1, 
       value: 8 

      }, { 
       color: '#A0A0A0', 
       width: 1, 
       value: 9 

      }] 
     }, 
     yAxis: { 
      title: { 
       text: 'Índice teste' 
      }, 
      max: 100, 
      min: 0, 
     }, 
     plotOptions: { 
      area: { 
       fillOpacity: 0.5 
      }, 
      series: { 
       cursor: 'pointer', 
       point: { 
        events: { 
         click: function() { 
          if (jQuery('#type_group_name_hidden').val() == 'Processo') { 
           jQuery('#type_group_name_hidden').val('Atividade'); 
          } else if (jQuery('#type_group_name_hidden').val() == 'Atividade') { 
           jQuery('#type_group_name_hidden').val('Procedimento'); 
          } else if (jQuery('#type_group_name_hidden').val() == 'Procedimento') { 
           jQuery('#type_group_name_hidden').val('Processo'); 
          } 
          jQuery('#group_name_hidden').val(this.category); 
          requestAjaxChart('processos', buildProcessos); 
         } 
        } 
       }, 
       marker: { 
        lineWidth: 1 
       }, 
       threshold: 50 
      } 
     }, 
     series: [{ 
      name: "Market", 
      data: [46.503590664272934, 51.39078282828278, 56.89226932668327, 47.66801075268824, 46.82561768530563, 59.23058676654176, 51.08220338983055, 46.17849829351536, 55.84550063371354, 51.428756058158314] 
     }, { 
      name: "My network", 
      data: [48.175, 27.159999999999997, 39.916666666666664, 38.6, 53.85, 38.949999999999996, 30.4, 51.9, 33.519999999999996, 54.7875] 
     }, { 
      name: "Avg", 
      data: [70, 80, 65, 75, 85, 82, 72, 69, 71, 58] 
     }] 
    }); 
});

심지어 그것이 무엇 클라이언트 욕망 정확히 아니라, 꽤 좋아 보인다 : 다음은 내 코드입니다. 다음과 같이 약간의 변경을해야합니다.

xAxis의 모든 수직선을 제거하십시오. 내 차트가 거꾸로 된 차트이므로이를 제거하는 방법을 알 수 없습니다.
xAxis 값 (0 - 100)에서 첫 번째 및 마지막 값 (0, 100) 만 유지하는 매개 변수 값 (10, 20, 30, ...)을 제거하십시오.
yAxis 레이블을 가로 라인
만들기 클릭은 오버 플로우 차트 영역

뒤에 점은 내가하지만 성공 거의 모든 구성 옵션을 시도했습니다.

의견이 있으십니까?

출처

2013-12-17 Santiago

일부 답변 :

1) 문서 gridlineWidth 속성에서 참조하십시오.

2) 문서 속성을 참조하십시오.

3) 다른 문서 labels.y 속성.

4) SVG/VML이더라도 여전히 HTML이므로 다른 뒤에있는 클릭 가능한 DIV를 만들 수 없습니다.

출처

2013-12-17 13:32:50

나는 지금 당신에게 키스 할 것입니다! 정말 고맙습니다. 한 번만 더. 내 [jsfiddle] (http://jsfiddle.net/sasantiago/Wqt9e/5/)를 확인할 수 있습니까? 그 수직선을 제거하는 방법이 있습니까? – Santiago

물론 xAxis의 경우'lineWidth : 0'을 추가하십시오. –

니스! 완벽하게 일했습니다! 감사! – Santiago

답변

관련 문제