charts - 是否可以使用 Chart js 或哪个图表库可以提供这种类型的图表?
问题描述
我需要创建这种类型的图表,我用图表 js 尝试过,但无法创建完全相同的输出,
我能够创建的是 具有这些设置的代码笔,
var speedCanvas = document.getElementById("speedChart");
Chart.defaults.global.defaultFontSize = 0;
var speedData = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
data: [100, 51, 75, 20, 200, 55, 400],
fill:false
}]
};
var chartOptions = {
legend: {
display: false,
},
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
}
}]
}
};
var lineChart = new Chart(speedCanvas, {
type: 'line',
data: speedData,
options: chartOptions
});
如果图表 JS 不可能,谁能告诉我哪个 JS 库提供了这样的图表?
需要创建这种类型的图表,
解决方案
这是您在 Highcharts 中的图像的复制品。随意根据您的需要对其进行更多定制。
演示:https ://jsfiddle.net/BlackLabel/76frnqc1/
series: [{
name: '+14%',
label: {
style: {
fontSize: '22px'
}
},
id: 'main',
data: [
3.7, 3.3, 3.9, 5.1, 3.5, 3.8, 4.0, 5.0, 6.1, 3.7, 3.3, 6.4,
6.9, 6.0, 6.8, 4.4, 4.0, 3.8, 5.0, 4.9, 9.2, 9.6, 9.5, 6.3,
9.5, 10.8, 14.0, 11.5, 10.0, 10.2, 10.3
]
}, {
linkedTo: 'main',
label: {
enabled: false
},
data: [10.3, 9.4, 8.9, 10.6, 10.5, 11.1,
10.4, 10.7, 11.3, 10.2, 9.6, 10.2, 11.1, 10.8, 13.0, 12.5, 12.5, 11.3,
10.1
],
pointStart: 30,
color: 'gray',
opacity: 0.6
}],
推荐阅读
- python - 使用人脸识别怎么样?
- python - xmldiff api 返回额外的(不必要的)编辑操作
- python - 如何根据 event_type 将 google bigquery 中的大型事件表拆分为多个表?
- c++ - 游戏引擎:类参数
- c# - linq2db 异常:“未提供配置字符串”。我没有 web/app.config,但即使我明确给出字符串,同样的异常
- javascript - 带有加载更多按钮的可折叠列表以显示此列表中的所有项目
- python - 在表格的两列下添加标题
- php - cURL 请求在本地工作正常,但在远程服务器上没有返回任何数据
- flutter - 在颤振中输入名称后如何将模板另存为图像
- php - PHP 无法在 url 中带有 id 的页面上使用表单添加到 db 并返回到 url 中带有 id 的页面