如何：为多轴图表指定颜色？答案

【问题标题】：how to : specify colors for multiple axes chart?如何：为多轴图表指定颜色？
【发布时间】：2012-07-05 18:00:20
【问题描述】：

我的图表显示良好，但两条线的颜色相同。如何为两条线指定不同的颜色？到目前为止，这是我的代码（片段）：

config.pointIndex = null;
  config.areaPoints = new Array();
  config.areaPoints[0] = pointsopens;
  config.areaPoints[1] = pointsclicks;
  var plotLinesopen = createPlotlines(pointsopens);
  var plotLinesclick = createPlotlines(pointsclicks);
  var options = {
     chart : { renderTo : 'areaChart' },
     colors: [
        '#4572A7',
        '#AA4643'
        ],
     xAxis: {
        plotLines1: plotLinesopen,
        plotLines2: plotLinesclick
     },
     series : [ data.pointsopens, data.pointsclicks ]
  };
  if (length > 100) {
     options.plotOptions = {
        area : {
           lineWidth: 1,
           marker : { radius : 1 }

        }
     };
  }
  options = jQuery.extend(true, {}, areaChartDefault, options);
  charts.area = new Highcharts.Chart(options);

谢谢。

PS，我的代码现在是：

 config.pointIndex = null;
        config.areaPoints = new Array();
        config.areaPoints[0] = pointsopens;
        config.areaPoints[1] = pointsclicks;
        var plotLinesopen = createPlotlines(pointsopens, '#AAAAAA');
        var plotLinesclick = createPlotlines(pointsclicks, '#DDDDDD');

        var options = {
            chart : { renderTo : 'areaChart' },
            xAxis: {
                plotLines: [plotLinesopen, plotLinesclick]
            },
            series : [ data.pointsopens, data.pointsclicks ]
        };
        if (length > 100) {
            options.plotOptions = {
                area : {
                    lineWidth: 1,
                    marker : { radius : 1 }

                }
            };
        }
        options = jQuery.extend(true, {}, areaChartDefault, options);
        charts.area = new Highcharts.Chart(options);

但它仍然给了我两条深蓝色的情节线。 createPlotlines 函数如下所示：

function createPlotlines(points, colour) {
    // Create plotlines from point data
    colour = typeof colour !== 'undefined' ? colour : '#CCCCCC';
    alert ('colour=='+colour);
    var plotLines = [];
    var middleYval = 0;
    for (var i in points) {
        middleYval = Math.max(middleYval, points[i].y);
        if (points[i].l) { // l property is true if label should be on for this point
            plotLines.push({
                color: colour,
                id: 'plotline'+i,
                value: points[i].x,
                width: 1,

            });
        }
    }
    return plotLines;
}

【问题讨论】：

pointsopens 和 pointsclicks 是什么？
要绘制的点集合 - 一个用于打开事件，另一个用于单击事件。这些点被正确绘制，有点我似乎无法改变情节线的颜色。它们的两条线下面也有不同颜色的区域。
目前还不可能。我也想改变 x 轴线的颜色。但它不起作用。仅当您为单行指定值 ==> xAxis.plotLines: {color: '', value: 'VALUE OF LINE ON AXIS'} 时才有效

标签： colors highcharts lines axes

【解决方案1】：

您的意思是 xAxis 和 yAxis 的颜色不同吗？我只看到这会成为其中之一。您绝对可以独立设置轴线的颜色。看到这个：example，ref

编辑：对于 plotLines，您可以使用 this： demo

【讨论】：

我指的是情节线，一条用于点打开，一条用于点点击。
对不起，我的术语全错了，系列线条的颜色是我想要着色的 - 连接图表上所有数据点的线条。我使用的是面积图，所以我可以指定线条下方的颜色，但是线条本身呢，现在所有线条都是蓝色的。

【解决方案2】：

如果您查看 reference，您会发现没有名为 colors 的 attr。
其他问题是没有 attr plotLines1 和 plotLines2 如您所见 here

解决方案：如果要更改绘图线颜色，则必须通过数组传递绘图线，如下所示并设置它们的颜色：

var options = {
    chart : { renderTo : 'areaChart' },
    xAxis: {
        plotLines: [{
            color: '#4572A7', // 
            width: 2,
            value: 5.5,
            id: 'plotline-1'
        }, {
            color: '#AA4643',
            width: 2,
            value: 8.5,
            id: 'plotline-2'
        }]
    },
    series : [ data.pointsopens, data.pointsclicks ]
};

Live example

更新1：您在此函数createPlotlines 中返回一个对象数组，然后将此数组放入其他数组中。这就是问题所在。
将您的函数替换为以下内容：

function createPlotlines(points, colour) {
    // Create plotlines from point data
    colour = colour || '#CCCCCC';
    var middleYval = 0;
    for (var i in points) {
        middleYval = Math.max(middleYval, points[i].y);
        if (points[i].l) { // l property is true if label should be on for this point
            return {
                color: colour,
                id: 'plotline'+i,
                value: points[i].x,
                width: 1,

            };
        }
    }
}

【讨论】：

有趣，我试过了（见我编辑的 OP），但到目前为止还没有运气。
也试过了，还是不行。感谢您的尝试，我想知道是否有什么东西覆盖了颜色。
@Calgacus 你能编辑你的答案并包括pointsopens和pointsclicks吗？
DOH！！我使用错误的术语把这个搞砸了——我什至不想要情节线——我希望不同系列线的颜色不同。一行用于“每天打开的事件”，另一行用于“每天的点击事件”。对不起。

【解决方案3】：

好的，这是我需要的，lineColor：

 $data = array(
    "name" => $name,
    "color" => '#00FFFF',
    "lineColor"=> '#00FFFF',
    "data" => $rows
);

该代码位于我的 php.ini 中名为 compileChartData 的本地函数中。

感谢您的努力，对混淆感到抱歉。

【讨论】：

【解决方案4】：

您可以将 plotLines 更改为以单行为目标。

否则你可以改变整个 Yaxis 或 Xaxis

xAxis: {
            type: 'datetime',
            gridLineColor: '#EEEEEE'
        },
        yAxis: {
            title: {
                text: 'Calls'
            },
            gridLineColor: '#EEEEEE'
        }

【讨论】：