Chart.Js : 如何根据第三个数据改变点的颜色

Question

我想根据第三个数据改变点的颜色

目前，我从 json 文件中获取 x 轴和 y 轴：

{"data": [{"date": "2022-04-04", "position": 5.0, "indexed": 1}, {"date": "2022-04-05", "position": 5.0, "indexed": 0}, {"date": "2022-04-06", "position": 5.0, "indexed": 0}, {"date": "2022-04-07", "position": 5.0, "indexed": 0}, {"date": "2022-04-07", "position": 5.1, "indexed": 0}, {"date": "2022-04-08", "position": 5.9, "indexed": 0}, {"date": "2022-04-09", "position": 5.0, "indexed": 0}, {"date": "2022-04-10", "position": 5.0, "indexed": 0}, {"date": "2022-04-11", "position": 5.0, "indexed": 0}, {"date": "2022-04-12", "position": 5.0, "indexed": 0}, {"date": "2022-04-13", "position": 5.0, "indexed": 0}, {"date": "2022-04-14", "position": 5.0, "indexed": 0}, {"date": "2022-04-15", "position": 5.0, "indexed": 0}, {"date": "2022-04-16", "position": 5.0, "indexed": 0}, {"date": "2022-04-17", "position": 5.0, "indexed": 0}, {"date": "2022-04-18", "position": 5.0, "indexed": 0}, {"date": "2022-04-19", "position": 5.0, "indexed": 0}, {"date": "2022-04-20", "position": 5.0, "indexed": 0}, {"date": "2022-04-21", "position": 5.0, "indexed": 0}]}

日期：x

位置：y

索引：如果 0：蓝色 - 如果 1：红色

为了根据这第三个数据更改颜色，我使用了可编写脚本的选项：https://www.chartjs.org/docs/latest/general/options.html#scriptable-options

这是我写的：

const main_data = {
label: '{{ keyword }}',
data: [],
backgroundColor: "#6AC44D",
borderColor: "#1300FF",
pointBorderColor: [],
borderWidth: 1,
pointBackgroundColor : function(context) {
        const response = fetch('/get_json/{{keyword}}');
        const datapoints = response.json();
        datapoints.then(datapoints => {
        const indexed = datapoints.data.map(function(index){
            return index.indexed;
        })                      
        var index = context.dataIndex;
        var value = context.dataset.data[index];
        console.log(value)
        var label = context.labels;
        if (indexed == 0){return value == 'blue'}else{return value =='red'}
    });
}

}

我做错了什么？

这里是允许我创建图表的函数，而不改变点的颜色。

这部分有效：

function createChart(){
    async function fetchdata(){
    const url = '/get_json/{{keyword}}';
    const response = await fetch(url);
    const datapoints = await response.json();
    return datapoints;
    };
     
    fetchdata().then(datapoints => {
        const dates = datapoints.data.map(function(index){
            return index.date;
        })
        const positions = datapoints.data.map(function(index){
            return index.position;
        })
        const indexed = datapoints.data.map(function(index){
            return index.indexed;
        })

    myChart.config.data.labels = dates
    myChart.config.data.datasets[0].data = positions
    myChart.update();
    });
}

Answer 1

返回颜色时出现 2 个错误：

返回颜色时，您实际上返回的是布尔值，如评论中所述，它应该只是字符串
indexed 是一个数组，所以 indexed==0 是不正确的，你真正想要做的是检查 indexed
中的目标索引

您的最终 if 应如下所示：

if (indexed[context.dataIndex] == 0){return 'blue'}else{return 'red'}

I've also made a JSFiddle so you can see this in action

Chart.Js : 如何根据第三个数据改变点的颜色

Chart.Js : How to change the color of a point, based on a third data

javascript

flask

chart.js