如何通過angular-chart.js設置chart.js散點線圖？

Question

Angular-chart.js是chart.js的包裝器。 我想創建一個如此處所述的散點圖表。 angular-chart.js文檔有一個如何設置折線圖的明確示例 ，我有這個工作。 我無法弄清楚如何將角度指令傳遞給散點線圖的正確數據。

為了澄清， chart.js采用兩種數據格式 。 我有第一種格式在chart.js和angular-chart.js中工作。 我有第二種格式通過chart.js但不通過angular-chart.js。 你能通過angular-chart.js提供一個散射圖的hello world示例嗎？

我假設這樣的東西可以根據兩個項目的文檔工作：

$scope.data = {
            datasets: [{
                label: 'Scatter Dataset',
                data: [{
                    x: -10,
                    y: 0
                }, {
                    x: 0,
                    y: 10
                }, {
                    x: 10,
                    y: 5
                }]
            }]
        };

$ scope.data將放在angular-chart.js文檔中的控制器中

Answer 1

我覺得你很親密。 我認為你唯一需要做的就是改變你的選擇並進行一些小修改（我需要一段時間才能讓它工作;最初，我嘗試過你發布的內容）：

在.js文件中：

$scope.data = [{
    x: -10,
    y: 0
}, {
    x: 0,
    y: 10
}, {
    x: 10,
    y: 5
}];

// The angular-chart directive will use this as the label
$scope.series = ['Scatter Dataset'];

$scope.options = {
    scales: {
        xAxes: [{
            type: 'linear',
            position: 'bottom'
        }]
    }
};

然后，在你的html文件中：

<canvas class="chart chart-line"
        chart-data="data"
        chart-series="series"
        chart-options="options">
</canvas>