각각 다른 색상과 툴팁을 보여주는 여러 줄거리에 대한 하이 차트?

나는 그래프를 그리기 위해 Highcharts를 사용하는 플라스크 앱을 가지고 있는데, 사용자가 그래프를 필요로하는 많은 입력을 입력하면 여러 색상으로 그래프에 여러 줄거리를 표시합니다. 그러나 8-10 줄거리 후 색상 반복과 따라서 유용하지 coz 자사의 구별되지 않습니다.각각 다른 색상과 툴팁을 보여주는 여러 줄거리에 대한 하이 차트?

<script type="text/javascript"> 
    $('document').ready(function(){ 
     window.seriesOptions = []; 
     window.yAxisOptions = [], 
     window.seriesCounter = 0, 
     window.colors = Highcharts.getOptions().colors; 
     generate_graph({{ coordinates| safe }} , {{ graph_name | safe }}); 
    }); 
    </script> 





/* 
Generate graph function takes two input parameters i.e. Coordinates - which is an array of [x, y] points AND graph_name which is an array of the (service_name,server_name) pair and generates 
seriesOptions and calls createChart function. 
*/ 
function generate_graph(coordinates, graph_name){ 

$.each(graph_name, function(i, name) { 

    window.seriesOptions[i]= { 
     name : graph_name[i], 
     data : coordinates[i], 
     type : 'line' 
    }; 
     seriesCounter++; 
     if (seriesCounter == graph_name.length) { 
      createChart(); 
     } 
    }); 
$('#add-to-dashboard-button').show(); 
} 

/* 
createChart function generates the actual graphs and sets the different properties of the graph. 
*/ 
function createChart(){ 
    $('#chart').highcharts('StockChart', { 
       chart: { 
        zoomType: 'x' 
       }, 
       rangeSelector: { 
       selected: 4 
       }, 
       xAxis: { 
        type: 'datetime', 
        labels: { 
         formatter: function() { 
          return Highcharts.dateFormat('%a %d %b', this.value); 
         } 
        } 
       }, 
       title : { 
        text : 'Graph' 
       }, 
       legend: { 
        enabled: true, 
        layout: 'vertical', 
        labelFormat: '<span style="color:{color}">{name}</span> - <b> x : ({point.x:.2f}) , </b> y : ({point.y:.2f}) <br/>', 
        maxHeight: 100 
        }, 
       series : seriesOptions 
      }); 
} 
</script>

플롯이 생성 될 때마다 다른 고유 한 색상으로 식별 할 수 있도록하는 방법.

또한 x 축의 데이터가 정렬 되더라도 툴팁이 나타나지 않습니까?

출처

2014-10-21 user2601010

차트를 만들거나 시리즈를 추가 할 때 색상을 지정하지 않으면 하이 차트가 기본 색상에서 하나를 선택합니다. 제한된 수의 기본값이 있습니다.

그러나 하이 차트에 새로운 기본 색상 세트를 알릴 수 있으므로 지원하려는 최대 색상까지 선택할 수 있습니다. 이 코드는 9 기본값을 설정하지만 당신이 원하는만큼 추가 할 수 있습니다, 당신은 단지 몇 가지 독특한 색으로 올 필요 :

Highcharts.setOptions({ 
     colors:[ 
    '#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'] 
    });

이 당신이 전화를 제일 먼저 확인합니다.

출처

2014-10-22 07:34:23 SteveP

각각 다른 색상과 툴팁을 보여주는 여러 줄거리에 대한 하이 차트?

답변

관련 문제