我使用以下配置和数据制作了这张图,想去掉图中的轮廓部分,但找不到文档,因为它似乎是此类图的默认设置:
`<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
到目前为止,我已经尝试使配置中的几乎每个值都不可见但无济于事
要删除图例,您应该禁用它(就像您部分所做的那样,但在错误的配置节点中)。
options: {
plugins: {
legend: false,
}
...
}
或
options: {
plugins: {
legend: {
display: false
},
}
...
}