[英]How to create line graph use chartjs?
1)我不明白,如何刪除背景灰色。 2)添加動態點0.38和2225並添加線。 請幫助。
這是我的代碼
var canvas = document.getElementById("lineChart");
var ctx = canvas.getContext("2d");
var data = {
labels: [0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1],
datasets: [
{
type: 'line',
label: 'Basic',
data: [19304,13433,9341,6931,5169, 3885,2927,2159,1853,1502, 1176,911,724,590,491, 400,335,280,239,200]
}
]
};
var myNewChart = new Chart(ctx , {
type: "line",
data: data
});
1)這是一個僅顯示行而不顯示下面的填充的示例。 基本上,您只使用fill: false
選項。
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels:
[0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1],
datasets: [{
label: 'Dataset 1',
borderColor: window.chartColors.blue,
borderWidth: 2,
fill: false,
data: [19304,13433,9341,6931,5169, 3885,2927,2159,1853,1502, 1176,911,724,590,491, 400,335,280,239,200]
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Drsw Line on Chart'
},
tooltips: {
mode: 'index',
intersect: true
},
}
});
2)chart.js本身沒有內置任何東西可以在圖表上繪制線條,但是同一團隊已經創建了一個不錯的插件,稱為chartjs-plugin-annotation ,您可以用來執行此操作。 這是一個如何在所需位置配置線的示例(這將在options
配置中進行。)
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 2225,
borderColor: 'rgb(75, 192, 192)',
borderWidth: 4,
label: {
enabled: true,
content: 'Point Label',
yAdjust: -16,
}
}]
}
這是一個codepen示例 ,演示了這一點。
1)嘗試添加數據集:
fill: false,
到你的數據集
2)不確定這是可能的
這將是一條評論,但我還不能發表評論。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.