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

【问题标题】：Highcharts for multiple plot lines each with a different color and show tooltip?多条绘图线的高图，每条线都有不同的颜色并显示工具提示？
【发布时间】：2014-10-21 20:07:28
【问题描述】：

我有一个烧瓶应用程序，我在其中使用 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 轴的数据已排序，工具提示也不会出现？

【问题讨论】：

标签： highcharts

【解决方案1】：

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

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

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

将此作为您调用的第一件事。

【讨论】：