我正在尝试将自定义颜色添加到柱形图中,因此每列都有不同的颜色。我有以下代码:
__this._chartColours = ['#2776BD', '#00A1D0','#00C195','#7ED321','#A8C600','#C9B600','#E3A600', '#F7941E', '#FC7149'];
__this._chart = am4core.create(__this._tileChartDiv[0], am4charts.XYChart);
if(result.chartDataMap != null)
{
var colorSet = new am4core.ColorSet();
var counter = 0;
$.each(result.chartDataMap, function(xAxis, yAxis)
{
__this._dataProvider.push({"category": xAxis, "column-1": yAxis});
__this._chart.colors.list.push(am4core.color(__this._chartColours[counter]));
});
__this._chart.data = __this._dataProvider;
__this._chart.padding(40, 40, 40, 40);
var categoryAxis = __this._chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.minGridDistance = 60;
categoryAxis.title.text = result.xAxisTitle;
var label = categoryAxis.renderer.labels.template;
label.wrap = true;
label.maxWidth = 120;
var valueAxis = __this._chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = result.yAxisTitle;
var series = __this._chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "category";
series.dataFields.valueY = "column-1";
series.tooltipText = "{valueY.value}"
series.columns.template.strokeOpacity = 0;
__this._chart.cursor = new am4charts.XYCursor();
}
它可以根据我创建的数据提供程序很好地绘制图表,但未设置颜色。我从hereL https://www.amcharts.com/docs/v4/concepts/colors/获得了颜色代码。 XY图表和衍生图表部分
我尝试使用主题,但是那也不起作用:
function am4themes_myTheme(target)
{
if (target instanceof am4core.ColorSet)
{
$.each(__this._chartColours, function(index, item)
{
target.list.push(am4core.color(item));
});
}
}
am4core.useTheme(am4themes_myTheme);
它将所有列设置为第一种颜色。然后,我尝试为每个列的dataProvider添加一个color属性,但再次将它们设置为全部具有第一种颜色。
我几乎没有主意。
答案 0 :(得分:2)
这里有几个问题。
首先,如果您希望图表仅使用 您的颜色,而不是附加到默认图表的ColorSet
,则必须通过分配{ {1}}到Color
(而不是chart.colors.list
为其赋值)。
接下来,默认情况下,列的颜色(push
)是基于其系列的。因此,即使您填充图表的fill
,也只有每个新系列将获得不同的颜色,而不是每一列。
要设置单个列的颜色,将类似于:
ColorSet
要使每个列都有其自己的颜色,我们可以在列的第一个实例化时即在其manually override it的template
inited
上进行设置。此外,列的column.fill = am4core.color("#2776BD");
将具有对其dataItem
的属性/引用,因此我们可以将其与event一起使用来按顺序分配颜色。
所以您的最终代码可能如下所示:
index
这是我们的ColorSet
's getIndex
method的分支,上面的代码和您的自定义颜色: