0

私のチャートはうまく表示されますが、2 本の線が同じ色です。2 つの線に異なる色を指定するにはどうすればよいですか? これまでの私のコード（フラグメント）は次のとおりです。

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

しかし、それでも2つの濃い青のプロットラインが表示されます. 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;
}
4

4 に答える 4

2

リファレンスを見ると、 attr という名前がないことがわかりますcolors。
その他の問題は、属性がないことです。ここでplotLines1わかるplotLines2ように

解決策: プロット ラインの色を変更する場合は、次のようにプロット ラインを配列に渡して色を設定する必要があります。

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

実際の例

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,

            };
        }
    }
}
于 2012-07-05T18:19:13.963 に答える
2

xAxis と yAxis の色が違うということですか? これがそれぞれの1つになることだけがわかります。軸線の色を個別に設定できます。これを参照してください: example , ref

編集: plotLines の場合、これを使用できます: demo

于 2012-07-05T18:03:59.113 に答える
0

わかりました、これが私が必要としていたものです、lineColor:

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

そのコードは、php の compileChartData というローカル関数に入ります。

ご尽力いただきありがとうございます。ご迷惑をおかけして申し訳ありません。

于 2012-07-06T17:53:47.157 に答える
0

plotLines をターゲットの単一行に変更できます。

または、YaxisまたはXaxis全体を変更できます

xAxis: {
            type: 'datetime',
            gridLineColor: '#EEEEEE'
        },
        yAxis: {
            title: {
                text: 'Calls'
            },
            gridLineColor: '#EEEEEE'
        }
于 2014-03-06T13:43:32.967 に答える