Я добавил borderda sh на свой график, чтобы сделать линию более четкой, но она изменила форму моей легенды. Я хочу, чтобы это был квадрат, а не та странная форма прямоугольника в легенде. Я понятия не имею, как это исправить. Кто-нибудь знает решение этой проблемы?
Вот мой график js варианты:
var options = {
responsive: true,
maintainAspectRatio: false,
backgroundColor: "#fffffff",
title: {
display: true,
text: title,
fontSize: 24
},
legend: {
display: true
},
tooltips: {
callbacks: {
label: function(tooltipItem, ctx) {
var label;
if(x_axis == "Temperature [K]")
{
label = [["Pressure: " + tooltipItem.yLabel], ["Temperature: " + tooltipItem.xLabel]];
}
else
{
label = [["Pressure: " + tooltipItem.yLabel], ["Abundance: " + tooltipItem.xLabel]];
}
return label;
},
}
},
animation: {
duration: 1 // general animation time
},
scales: {
xAxes: [{
type: x_type,
display: true,
ticks: {
beginAtZero: false,
autoSkip: false,
fontSize: 20,
suggestedMin: x_min,
suggestddMax: x_max,
callback: function(value, index, values) {
if (x_axis == "Abundance"){
if (value == 1e-9)
{
return 1 + "n";
}
else if(value == 1e-8)
{
return 10 + "n";
}
else if(value == 1e-7)
{
return 100 + "n";
}
else if (value == 1e-6){
return 1 + "\u03BC";
}
else if (value == 1e-5)
{
return 10 + "\u03BC";
}
else if(value == 1e-4)
{
return 100 + "\u03BC";
}
else if (value == .001 || value == .01 || value == .1 || value == 1){
return value;
}
}
else if (x_axis == "Temperature [K]")
{
return value;
}
}
},
scaleLabel: {
labelString: x_axis,
display: true,
fontSize: 20,
fontColor: "Black",
}
}],
yAxes: [{
type: 'logarithmic',
display: true,
ticks: {
reverse: true,
beginAtZero: false,
autoSkip: false,
min: 1e-6,
max: 1,
steps: 6,
fontSize: 20,
callback: function(value, index, values) {
// y_log_ticks = [1e-6, 1e-5, 1e-4, 1e-3, 1e-2, 1e-1, 1]
if (value == 1e-6){
return 1 + "\u03BC";
}
else if (value == 1e-5)
{
return 10 + "\u03BC";
}
else if(value == 1e-4)
{
return 100 + "\u03BC";
}
else if (value == .001 || value == .01 || value == .1 || value == 1){
return value;
}
}
},
scaleLabel:{
display: true,
labelString: y_axis,
diplay: true,
fontSize: 20,
fontColor: "Black"}
}]
}
}
А здесь как я добавляю данные с помощью границы sh:
function update_plot(json){
line_patter = [[1,1], [10, 10], [20, 5], [15, 3, 3, 3], [20, 3, 3, 3, 3, 3, 3, 3], [12, 3, 3]];
counter++;
chart1.data.datasets.unshift({
data: json.temp_pressure,
showLine: true,
pointRadius: 5,
fill: false,
label: "Plot " + counter,
borderDash: line_patter[counter % 6],
borderColor: getLineColor(chart1.data.datasets.length),
backgroundColor: getLineColor(chart1.data.datasets.length),
});
chart2.data.datasets.unshift({
data: json.fh2o,
showLine: true,
pointRadius: 5,
fill: false,
label: "Plot " + counter + ": H2O",
borderDash: line_patter[counter % 6],
borderColor: getLineColor(chart2.data.datasets.length),
backgroundColor: getLineColor(chart2.data.datasets.length),
});
chart2.data.datasets.unshift({
data: json.fo3,
showLine: true,
pointRadius: 5,
fill: false,
label: "Plot " + counter + ": O3",
borderDash: line_patter[counter % 6],
borderColor: getLineColor(chart2.data.datasets.length),
backgroundColor: getLineColor(chart2.data.datasets.length),
});
chart1.update();
chart2.update();
}