Question

我有一个烧瓶应用程序，其中我使用Highcharts绘制数据，如果用户输入了大量需要图形的输入，我会在图形上绘制不同颜色的多个绘图线。但是在8-10个绘图线后，颜色重复，因此它没有用，因为它无法区分。

    <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轴的数据已排序，工具提示也不会出现？

Answer 1

如果在创建图表或添加系列时未指定任何颜色，则highcharts将从其默认颜色中选择一种颜色。默认值有限。

但是，您可以告诉highcharts有关一组新的默认颜色，因此您可以提供更多选择，直到您想要支持的最大值。此代码设置了9个默认值，但您可以根据需要添加任意数量，只需要提供一些独特的颜色：

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

这是你打电话的第一件事。

多个绘图线的高图表，每个绘图线都有不同的颜色并显示工具提示？

1 个答案: