如何在使用AnyChart库的标记图上显示不同颜色的标记?

huangapple go评论53阅读模式
英文:

How to show different color of marker on marker chart using AnyChart library

问题

我正在制作一个财务图表,我在同一个页面上有两个图表,并且在显示标记方面遇到了问题。我需要根据数据库中保存的颜色显示每个标记。我有一个数据集,其中包含一些值和包含颜色名称(黄色、绿色等)的字符字段。我需要以数据库中保存的颜色显示标记。例如,一个标记可以是绿色,但另一个可以是黑色。我不知道如何做到这一点,以下是我最佳的猜测。另外,请不要与Django模板语法混淆,它仅用于在后端对数据进行迭代,并创建将用于图表的数据列表。

const dataCCI = []
{% for stock in stocks %}
    dataCCI.push([
        new Date("{{ stock.date }}").toISOString().slice(0, 10), 20, '{{ stock.color }}']
    );
{% endfor %}

var ibmDataTable = anychart.data.table();
ibmDataTable.addData(dataCCI);

var plotSecond = chart.plot(1);
plotSecond.height('30%');

// 创建映射数据的绘图系列
var IBM = plotSecond
    .marker(ibmDataTable)
    .name('IBM');

我尝试了多个示例和我能想到的一切,但只能显示具有默认颜色的标记。

英文:

I am making a financial chart I have two charts on the same page and I have a problem with displaying markers, I need to display each marker according to the color that is saved in the database, I have a dataset with some values and char field that contains the color name (yellow, green...) I need to display markers in a color that is saved in the database. For example, one marker can be green but another can be black. I don't know how to do that this is my best guess. Also, don't be confused with Django template syntax it is used to iterate over data in the backend only and to create a list of data that will be used for the chart.

const dataCCI = []
            {%for stock in stocks %}

            dataCCI.push([
                new Date("{{stock.date}}").toISOString().slice(0, 10), 20, 'red'],)
            {% endfor %}

var ibmDataTable = anychart.data.table();
            ibmDataTable.addData(dataCCI)

var plotSecond = chart.plot(1);
            plotSecond.height('30%');

            // create plot series with mapped data
            var IBM = plotSecond
                .marker(ibmDataTable)
                .name('IBM');

I tried multiple examples and everything that came to my mind but I only managed to display markers with only default color.

答案1

得分: 1

合适的数据映射可以解决您的问题。

如果您的数据包含颜色名称或值,您可以将它们添加为映射中的外观选项。

// 创建数据
var data = [
  ["一月", 12000, "红色"],
  ["二月", 15000, "蓝色"],
  ["三月", 16000, "#333555"],
  ["四月", 14000, "#aaaaaa"],
  ["五月", 10000, "水绿色"]
];

// 映射数据
var mapping1 = dataSet.mapAs({x: 0, value: 1, fill: 2});

您可以查看如何使用映射来应用数据中的颜色的示例

此外,我们的文档中包含有关映射的所有复杂信息

英文:

Proper mapping of your data can fix your problem.

If your data contains color names or values, you can add them as an appearance option in your mapping.

    // create data
    var data = [
      ["January", 12000, "red"],
      ["February", 15000, "blue"],
      ["March", 16000, "#333555"],
      ["April", 14000, "#aaaaaa"],
      ["May", 10000, "aqua"]
    ];

    // map the data
    var mapping1 = dataSet.mapAs({x: 0, value: 1, fill: 2});

You may see an example of how to use mapping to apply colors from your data.

In addition, our documentation has all of the complex information concerning mapping.

答案2

得分: 0

你尝试使用fill方法吗?

var IBM = plotSecond
.marker(ibmDataTable)
.name('IBM')
.fill('blue');

英文:

Have you tried using the fill method?

  var IBM = plotSecond
     .marker(ibmDataTable)
     .name('IBM')
     .fill('blue');

huangapple
  • 本文由 发表于 2023年3月4日 03:06:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/75630965.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定