我想更改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"
}
});
&#13;
#chartdiv {
width: 100%;
height: 400px;
}
&#13;
<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>
&#13;
如果我在数据集中更改颜色,则会更改所有图形颜色。我想给他们不同的颜色。底部面板中有两个图表。一个是列,另一个是行。它们也应该有不同的颜色。
我尝试了amCharts文档中给出的所有颜色属性,但没有任何工作(Ref.)。怎么做这件事?
答案 0 :(得分:4)
您可以在每个stockGraph中将useDataSetColors
设置为false,以使每个图形具有不同的颜色。如果您在数据中定义了颜色,则将此设置为false还允许您通过自己的fillColors
和lineColor
直接设置图形对象内的颜色,以及相关的* colorField属性。 / p>
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"
}
});
&#13;
#chartdiv {
width: 100%;
height: 400px;
}
&#13;
<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>
&#13;
答案 1 :(得分: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>