Измените цвет графика в диаграмме AmCharts

Я хочу изменить цвет графиков в Stock-Chart. На нижней панели расположено несколько графиков. Эти диаграммы должны иметь разный цвет.

Snippet is here:

var chartData = generateChartData();

function generateChartData() {
    var chartData = [];
    var firstDate = new Date(2012, 0, 1);
    firstDate.setDate(firstDate.getDate() - 1000);
    firstDate.setHours(0, 0, 0, 0);

    for (var i = 0; i < 1000; i++) {
        var newDate = new Date(firstDate);
        newDate.setHours(0, i, 0, 0);

        var a = Math.round(Math.random() * (40 + i)) + 100 + i;
        var b = Math.round(Math.random() * (40 + i)) + 100 + i;

        chartData.push({
            "date": newDate,
            "value": a,
            "volume": b
        });
    }
    return chartData;
}

var chart = AmCharts.makeChart("chartdiv", {
    "type": "stock",
    "theme": "light",
    "categoryAxesSettings": {
        "minPeriod": "mm"
    },
    "dataSets": [{
        "color":"red", //it changes the color of all the graphs, i need different color for bottom panel.
        "fieldMappings": [{
            "fromField": "value",
            "toField": "value"
        }, {
            "fromField": "volume",
            "toField": "volume"
        }],
        "dataProvider": chartData,
        "categoryField": "date"
    }],
    "panels": [{
        "showCategoryAxis": false,
        "title": "Value",
        "percentHeight": 70,
        "stockGraphs": [{
        		"fillAlphas": 0,
						"fillColors":"red",
            "id": "g1",
            "valueField": "value",
            "type": "smoothedLine",
            "lineThickness": 2,
            "bullet": "round",
            
        }],
        "stockLegend": {
            "valueTextRegular": " ",
            "markerType": "none"
        }
    }, 
    {
        "title": "Volume",
        "percentHeight": 30,
        "valueAxes": [{
            "id": "ValueAxis-1",
            "title": "Axis title"
        }],
        "stockGraphs": [{
                "valueField": "volume",
                "type": "column",
                "cornerRadiusTop": 2,
                "fillAlphas": 1,
                        "fillColorsField":"red"
            },
            {
                "valueField": "value",
                //"type": "column",
                "cornerRadiusTop": 5,"fillColorsField":"red"
            }
        ],
        "stockLegend": {
            "valueTextRegular": " ",
            "markerType": "none"
        }
    }],
    "chartScrollbarSettings": {
        "graph": "g1",
        "usePeriod": "10mm",
        "position": "top"
    },

    "chartCursorSettings": {
        "valueBalloonsEnabled": true
    },

    "periodSelector": {
        "position": "top",
        "dateFormat": "YYYY-MM-DD JJ:NN",
        "inputFieldWidth": 150,
        "periods": [{
            "period": "hh",
            "count": 1,
            "label": "1 hour",
            "selected": true
        }, {
            "period": "hh",
            "count": 2,
            "label": "2 hours"
        }, {
            "period": "hh",
            "count": 5,
            "label": "5 hour"
        }, {
            "period": "hh",
            "count": 12,
            "label": "12 hours"
        }, {
            "period": "MAX",
            "label": "MAX"
        }]
    },

    "panelsSettings": {
        "usePrefixes": true
    },

    "export": {
        "enabled": true,
        "position": "bottom-right"
    }
});
#chartdiv {
  width: 100%;
  height: 400px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>										

Если я изменю цвет в наборах данных, он изменит цвет всех графиков. Я хочу придать им другой цвет. На нижней панели расположены два графика. Один столбец, а другой - линия. Они тоже должны быть другого цвета.

Я попробовал все свойства цвета, указанные в документации amCharts, но ничего не работает (Ссылка). Как это сделать?


person Rabinder Bisht    schedule 26.07.2017    source источник
comment
Вы изучили это: amcharts.com/demos/line-with-changing -цвет   -  person Hash    schedule 26.07.2017


Ответы (2)


Вы можете установить для useDataSetColors значение false в каждом stockGraph, чтобы каждый график имеет другой цвет. Установка этого значения в false также позволит вам напрямую установить цвет внутри объекта графика через их собственный fillColors и lineColor, а также связанные с ними свойства * colorField если у вас есть цвета, определенные в ваших данных.

stockGraphs: [{
   useDataSetcolors: false, //set for each stockGraph object where you don't 
                            //want the graph to use the dataSet color and generate its own.
   // ...
}, {
   useDataSetcolors: false,
}]

Обновленная демоверсия:

var chartData = generateChartData();

function generateChartData() {
  var chartData = [];
  var firstDate = new Date(2012, 0, 1);
  firstDate.setDate(firstDate.getDate() - 1000);
  firstDate.setHours(0, 0, 0, 0);

  for (var i = 0; i < 1000; i++) {
    var newDate = new Date(firstDate);
    newDate.setHours(0, i, 0, 0);

    var a = Math.round(Math.random() * (40 + i)) + 100 + i;
    var b = Math.round(Math.random() * (40 + i)) + 100 + i;

    chartData.push({
      "date": newDate,
      "value": a,
      "volume": b
    });
  }
  return chartData;
}

var chart = AmCharts.makeChart("chartdiv", {
  "type": "stock",
  "theme": "light",
  "categoryAxesSettings": {
    "minPeriod": "mm"
  },
  "dataSets": [{
    "color": "red", 
    "fieldMappings": [{
      "fromField": "value",
      "toField": "value"
    }, {
      "fromField": "volume",
      "toField": "volume"
    }],
    "dataProvider": chartData,
    "categoryField": "date"
  }],
  "panels": [{
      "showCategoryAxis": false,
      "title": "Value",
      "percentHeight": 70,
      "stockGraphs": [{
        "fillAlphas": 0,
        "fillColors": "red",
        "id": "g1",
        "valueField": "value",
        "type": "smoothedLine",
        "lineThickness": 2,
        "bullet": "round",

      }],
      "stockLegend": {
        "valueTextRegular": " ",
        "markerType": "none"
      }
    },
    {
      "title": "Volume",
      "percentHeight": 30,
      "valueAxes": [{
        "id": "ValueAxis-1",
        "title": "Axis title"
      }],
      "stockGraphs": [{
          "useDataSetColors": false,
          "valueField": "volume",
          "type": "column",
          "cornerRadiusTop": 2,
          "fillAlphas": 1,
          "fillColorsField": "red" //note that this looks for colors in your data for eacc point. use fillColors instead if you want to change the color directly for all points
        },
        {
          "useDataSetColors": false,
          "valueField": "value",
          //"type": "column",
          "cornerRadiusTop": 5,
          "fillColorsField": "red"
        }
      ],
      "stockLegend": {
        "valueTextRegular": " ",
        "markerType": "none"
      }
    }
  ],
  "chartScrollbarSettings": {
    "graph": "g1",
    "usePeriod": "10mm",
    "position": "top"
  },

  "chartCursorSettings": {
    "valueBalloonsEnabled": true
  },

  "periodSelector": {
    "position": "top",
    "dateFormat": "YYYY-MM-DD JJ:NN",
    "inputFieldWidth": 150,
    "periods": [{
      "period": "hh",
      "count": 1,
      "label": "1 hour",
      "selected": true
    }, {
      "period": "hh",
      "count": 2,
      "label": "2 hours"
    }, {
      "period": "hh",
      "count": 5,
      "label": "5 hour"
    }, {
      "period": "hh",
      "count": 12,
      "label": "12 hours"
    }, {
      "period": "MAX",
      "label": "MAX"
    }]
  },

  "panelsSettings": {
    "usePrefixes": true
  },

  "export": {
    "enabled": true,
    "position": "bottom-right"
  }
});
#chartdiv {
  width: 100%;
  height: 400px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

person xorspark    schedule 26.07.2017
comment
Это то, что я искал. Еще раз спасибо @xorspark - person Rabinder Bisht; 26.07.2017

person    schedule
comment
Цвет границы выноски должен быть того же цвета, что и график. У черного должна быть черная окантовка шарика, так его будет легко идентифицировать. Спасибо за ваш ответ. - person Rabinder Bisht; 26.07.2017
comment
Ладно. @xorspark ответ правильный. Я понимаю решение от него ответа. Спасибо - person Dhaarani; 26.07.2017