4

我想更改 Stock-Chart 中图表的颜色。底部面板中有多个图表。这些图表应该有不同的颜色。

片段在这里： 

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 文档中给出的所有颜色属性，但没有任何效果（参考）。这件事怎么办？

4

2 回答 2

4

您可以useDataSetColors在每个 stockGraph 中设置为 false 以使其具有不同的颜色。如果您在数据中定义了颜色，则将此设置为 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>

于 2017-07-26T12:21:42.457 回答
1 

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;
}
.amChartsPanel rect.amcharts-graph-column-front.amcharts-graph-column-element {
    fill: #000;
    stroke: #000;
}
<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>

于 2017-07-26T11:46:37.210 回答