为什么我看不到第二部剧情？

Question

你好，我用javascript和Chart编写了这段代码.js ：

<script>
new Chart(document.getElementById("line-chart"), 
{type:'line', 
data: {
labels: [18.123,46.8603108462,75.5976216923,104.334932538],
datasets: [{
data: [418872.777267,262233.131655,180687.131758,133676.324505],
label: "Model",
borderColor: "#3e95cd",
fill: false     
}]      
}
},
{
type: 'scatter',
data: {
datasets: [{
label : 'Data',
fill:false,
showLine: false,
backgroundColor: "#FF0000",
data : [{x: 17.0, y: 454995.091169},
{x: 18.0, y: 457656.874749},
{x: 19.0, y: 444574.49162},
{x: 20.0, y: 432511.514968},
{x: 21.0, y: 421184.776328}],
}]
},
options: {
title:{
display: true,
text:"Test"},
scales: {
xAxes: [{
type: 'logarithmic',
position: 'bottom'
}],
yAxes: [{
type: 'logarithmic'
}]
}
}
}
);
</script>

问题是我没有看到散点图，我只看到第一个图。实际上，我想以对数刻度在同一张图上绘制这两个图。

谢谢！

Answer 1

您需要在线数据集中添加一个类型为"scatter"的数据集。您可以在此处查看他们的混合图表文档 http://www.chartjs.org/docs/latest/charts/mixed.html.

您可以在此处查看我的运行示例 https://jsfiddle.net/sherlcode13/m3mfz6jh/5/

var ctx = new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: [18.123,46.8603108462,75.5976216923,104.334932538],
datasets: [{
data: [418872.777267,262233.131655,180687.131758,133676.324505],
label: "Model",
borderColor: "#3e95cd",
fill: false     
}, {
label : 'Data',
fill:false,
showLine: false,
data : [{x: 17.0, y: 454995.091169},
{x: 18.0, y: 457656.874749},
{x: 19.0, y: 444574.49162},
{x: 20.0, y: 432511.514968},
{x: 21.0, y: 421184.776328}],
type: 'scatter'
}
]        
},
options: {
title:{
display: true,
text:"Test"
},
scales: {
xAxes: [{
type: 'logarithmic',
position: 'bottom'
}],
yAxes: [{
type: 'logarithmic'
}]
}
}
})

Answer 2

您可以使用混合图表，可以创建两种或多种不同图表类型组合的混合图表

http://www.chartjs.org/docs/latest/charts/mixed.html