Javascript 在chart.js中的图例上显示点样式

对于此图表的第一个数据集

XPData

，如何设置图例样式以使用点而不是线

我希望我所需要做的就是根据添加：

showLines:false

，但我不知道该将此设置放在何处

以下是数据集（请参见fiddle）：

/*jshint版本：6*/
var ctx=document.getElementById（“myChart”）；
类数据点{
构造函数（x，y）{
这个.x=x；
这个。y=y；
}
}
var天数=85天；
var-chillax=72.5；
//XP数据集
变量XPData={
标签：“XP已获得”，
//填充：假，
//背景色：“rgba（0,0,0,0）”，
//边框颜色：“rgba（0,0,0,0）”，
pointBorderColor:#444“，
pointBackgroundColor:#444“，
数据：[]，
展示路线：错误，
选项：{
图例：{
标签：{
usePointStyle:true
}
}
},
};
//XP数据生成
var合计=0；
对于（变量i=0；i<35；i++）{
总计+=10*数学楼层（数学随机（）+0.5）；
总计+=5*数学楼层（数学随机（）+0.5）；
总计+=5*数学楼层（数学随机（）+0.5）；
var p=新数据点（i+1，总计）；
XPData.data.push（p）；
}
//XP趋势数据
变量XPTrendData={
标签：“XP趋势”，
填充：假，
点半径：0，
线张力：0，
borderDash:[5,5]，
边框颜色：“ccc”，
背景色：“rgba（0,0,0,0）”，
数据：[]，
};
//XP趋势计算
var合计=0；
var days\u so\u far=XPData.data.length；
总计=XPData.data[迄今为止的天数-1].y；
var average_per_day=总计/迄今为止的天数；
var趋势_总计=总计；
for（i=days\u至今；i
您应该在您的选项中使用如下代码：

options: {
    legend: {
       labels: {
           usePointStyle: true
       }
     }
},

showLine=false，不是showLines。
然后像往常一样设置边框/背景色，图例就会显示出来

选项中的设置点样式将更改图例，使其看起来像点。
使用当前库


加码

legend: {
    labels: {
      usePointStyle: true,
    },
  }

内部选项而非内部
var XPData={…}



var ctx=document.getElementById（“myChart”）；
类数据点{
构造函数（x，y）{
这个.x=x；
这个。y=y；
}
}
var天数=85天；
var-chillax=72.5；
//XP数据集
变量XPData={
标签：“XP已获得”，
填充：假，
背景颜色：“444”，
边框颜色：“444”，
pointBorderColor:#444“，
pointBackgroundColor:#444“，
数据：[]，
展示线：错，
};
//XP数据生成
var合计=0；
对于（变量i=0；i<35；i++）{
总计+=10*数学楼层（数学随机（）+0.5）；
总计+=5*数学楼层（数学随机（）+0.5）；
总计+=5*数学楼层（数学随机（）+0.5）；
var p=新数据点（i+1，总计）；
XPData.data.push（p）；
}
//XP趋势数据
变量XPTrendData={
标签：“XP趋势”，
填充：假，
点半径：0，
线张力：0，
borderDash:[5,5]，
边框颜色：“ccc”，
背景色：“rgba（0,0,0,0）”，
数据：[]，
};
//XP趋势计算
var合计=0；
var days\u so\u far=XPData.data.length；
总计=XPData.data[迄今为止的天数-1].y；
var average_per_day=总计/迄今为止的天数；
var趋势_总计=总计；
for（i=days\u至今；ilegend: {
    labels: {
      usePointStyle: true,
    },
  }