更改散点图中可隐藏数据集的可见性 ChartJS

问题描述 投票:0回答:1

我使用以下配置和数据制作了这张图,想去掉图中的轮廓部分,但找不到文档,因为它似乎是此类图的默认设置:


`<canvas id="myChart"></canvas>
            <script>
                //get the csv data
                const chartData = "/static/csv/result.csv";
                //parse
                // const parseData = d3.csvParse(chartData)
                d3.csv(chartData).then(function(data) {
                    console.log(data)
                    const x = data.map(function(d) {
                        return d.Algorithm
                    })
                    const y = data.map(function(d) {
                        return d.Cost
                    })
                    const z = data.map(function(d) {
                        return d.Time
                    })`

                    const ctx = document.getElementById('myChart').getContext('2d');

                    const dataForConfig = {
                        // labels: x,
                        datasets: x.map((ds, i) => {
                            return {
                                label: x[i],
                                data: [{
                                    x: y[i],
                                    y: z[i]
                                }],
                                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                                // borderColor: 'rgba(255, 99, 0, 1)',
                                //I want the border color of a point to depend on the algorithm
                                borderColor: function(context) {
                                    // var index = context.dataIndex;
                                    // var value = context.dataset.data[index];
                                    var type = context.dataset.label;
                                    // console.log('WHATTHEFUCK', type)
                                    return type == "Algorithm" ? 'red' : // draw negative values in red
                                        type == "Knapsack" ? 'blue' : // else, alternate values in blue and green
                                        type == "Recursive Knapsack" ? 'green' :
                                        type == "Static" ? 'purple' :
                                        type == "Dynamic" ? "brown" : 'black'
                                },
                                borderWidth: 1
                            }
                        })
                    }

                    const myChart = new Chart(ctx, {
                        type: 'scatter',
                        data: dataForConfig,
                        labels: {
                            visible: false
                        },
                        options: {
                            legend: {
                                display: false
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    stepSize: 0.05,
                                }
                            }
                        }
                    });
                })
            </script>

[![Graph](https://i.stack.imgur.com/mmD3v.jpg)](https://i.stack.imgur.com/mmD3v.jpg)

What options do I have to make not visible for that pseudo-legend/interactive key to go away

Thanks 

到目前为止,我已经尝试使配置中的几乎每个值都不可见但无济于事

chart.js
1个回答
0
投票

要删除图例,您应该禁用它(就像您部分所做的那样,但在错误的配置节点中)。

options: {
  plugins: {
    legend: false,
  }
...
}

options: {
  plugins: {
    legend: {
      display: false
    },
  }
...
}
© www.soinside.com 2019 - 2024. All rights reserved.