2012-09-14 5 views
9

스플라인 그래프에서 획 색상을 변경할 수 있었지만 시리즈를 숨기고 표시 한 다음 점과 범례를 클릭 한 다음 각각을 마우스로 클릭하여 표시 할 때까지 색상이 변경되지 않습니다. 포인트. http://jsfiddle.net/J56hm/2/하이 차트에서 동적으로 계열 색상 변경

$(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container' 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]   
     }] 
    }); 

    // the button handler 
    $('#button').click(function() { 
     chart.series[0].color = "#FF0000"; 
     chart.series[0].graph.attr({ stroke: '#FF0000' }); 

     $.each(chart.series[0].data, function(i, point) { 
      point.graphic.attr({ fill: '#FF0000' }); 
     }); 
     chart.series[0].redraw(); 
     chart.redraw(); 
    }); 
});​ 

어떤 생각이 왜 이런 일이 나이 문제를 해결하는 방법 :

나는 여기에 바이올린을 가지고?

답변

6

가지고 올 경우 답을 업데이트 할 것입니다,이 작업을 수행하는 highcharts에서 지원되는 모든 방법을 모른다 해결책 :

http://highslide.com/forum/viewtopic.php?f=9&t=7075&p=33437 위의 그림은 이것을 설명하는 http://jsfiddle.net/G5Pk7/입니다.

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container' 
    }, 
    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    series: [{ 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]   
    }] 
}); 

$('#button').click(function() { 
    var series = chart.series[0]; 
    series.color = "#FF00FF"; 
    series.graph.attr({ 
     stroke: '#FF00FF' 
    }); 
    chart.legend.colorizeItem(series, series.visible); 
    $.each(series.data, function(i, point) { 
     point.graphic.attr({ 
      fill: '#FF00FF' 
     }); 
    }); 
    series.redraw(); 
}); 

이것은 분명히 더러운 해결책이지만 작동하는 것 같습니다.

은 간단
+0

왜 이것을 '더러운'해결책이라고 생각하십니까? 이것은 나를 위해 위대한 일했습니다! – user1415427

5

콘솔을 보셨습니까?

ReferenceError: series is not defined
http://fiddle.jshell.net/J56hm/1/show/
Line 39

이 문제

$.each(chart.series[0].data, function(i, point) { 
... 
} 
그러나 당신이 당신이 직접으로 렌더링되는 SVG를 조작하려고하는 블루 다시 을가는 점 위에 마우스를 올려 때 이제 반대, 일을 해결 다음으로 변경 색상 속성을 설정하여 highcharts. 하이 차트가 렌더링 알고리즘을 기반으로 차트를 다시 그리기 때문에 모든 변경 사항이 손실 될 수 있으므로 올바른 방법은 아닙니다. 모든 그런 말을 한 후
, 나는 아직도 내가 뭔가 highcharts 포럼에서 다음 스레드가

@ jsFiddle

+0

내 실수를 사용할 수 있습니다. 내가 질문을 게시하고 콘솔을 보지 않았을 때 나는 서둘러 있었다. 기본 SVG를 수정하는 경우에도 더러운 작업을 발견했을지 모르지만 내 질문은 여전히 ​​유효합니다. – Soliah

30

, 당신은 오류 코드를

chart.series[0].options.color = "#008800"; 
chart.series[0].update(chart.series[0].options); 
관련 문제