如何使用chart.js交互式制作图表

Question

Hello I have this code : 您好我有以下代码：

<!DOCTYPE HTML>
<html>
<head>
<title>my website</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<link rel="stylesheet" href="style.css" />
</head>

<body>

<div id = "Global">
<div id = "gauche">
<canvas id="line-chart" width="800" height="450"></canvas>
<script>
var ctx = new Chart(document.getElementById("line-chart"), {
    type: 'line',
    data: {
/*         labels: [18.123,46.8603108462,75.5976216923,104.334932538] */
        datasets: [{
            data: [{'y': 0,'x': 0},
{'y': 4,'x': 2},
{'y': 8,'x': 4},
{'y': 16,'x': 8}],
            label: "Data",
            borderColor: "#3e95cd",
            fill: false     
        }]        
    },
    options: {
        title:{
            display: true,
            text:"my website"
        },
        scales: {
            xAxes: [{

                position: 'bottom'
            }],
            yAxes: [{

            }]
        }
    }
})
</script>
</div>
<div id = "droite">
<br /><br /><br />
<br /><br /><br />
<br />a : 0 <input style="margin-left:180px" type="range" min="0" max="10" step="0.01" value="2" class="slider" id="myRange" onchange="updateValue_2(this.value);"> 10
<input type="text" id="textInput" value="">
<script>
function updateValue_2(val) {document.getElementById('textInput').value="a = "+val;}
</script>



</div>
</div>
</body>

</html>

And this code actually draw the equation y = ax where I choose to begin a = 2. 这段代码实际上绘制了等式y = ax，我选择以a = 2开始。

The code look like this : 代码如下：

And what I would like is when I try to vary the range for instance if I change the value of a which is equals to 2 to 5 I see only the equation y = 5x on the graph but I don't know if it possible whith Chart.js 我想要的是例如，当我尝试改变范围时，例如，如果我将a的值更改为等于2到5，我在图表上只看到等式y = 5x，但我不知道是否有可能chart.js之

Thank you for your help ! 谢谢您的帮助！

Answer 1

You can just use the function in the documentation page, you have to pass the chart, label and data. 您只需在文档页面中使用该功能，就必须传递图表，标签和数据。

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

if you need to remove previous data 如果您需要删除以前的数据

function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

http://www.chartjs.org/docs/latest/developers/updates.html http://www.chartjs.org/docs/latest/developers/updates.html

如何使用chart.js交互式制作图表

问题描述

1 个解决方案

解决方案1
1 2018-05-25 14:46:09

如何使用chart.js交互式制作图表

问题描述

1 个解决方案

解决方案1 1 2018-05-25 14:46:09

解决方案1
1 2018-05-25 14:46:09