Question

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

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;
}

Answer 1

你的意思是xAxis和yAxis的颜色不同吗？我只看到这会产生其中一个。您可以独立设置轴线的颜色。请参阅：example，ref

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

Answer 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

<强> UPDATE1 ：您将在此函数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,

            };
        }
    }
}

Answer 3

好的，这就是我需要的东西，lineColor：

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

代码进入我的php中名为compileChartData的本地函数。

感谢您的努力，并感谢抱歉。

Answer 4

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

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

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

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

4 个答案: