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

为什么我看不到第二个情节？

2 个答案: