Как настроить диаграмму диаграммы диаграммы chart.js через angular-chart.js?

Question

Angular-chart.js - обертка вокруг chart.js. Я хочу создать диаграмму диаграммы рассеяния, как описано here. Документация angular-chart.js имеет a clear example of how to set up a line chart, и у меня это работает. Я не смог понять, как передать угловую директиву правильные данные для графика линии разброса.

уточнить, chart.js takes two data formats. У меня есть первый формат, который работает как в chart.js, так и в angular-chart.js. У меня есть второй формат, который работает через chart.js, но не через angular-chart.js. Не могли бы вы представить приветственный пример примера графика рассеяния через angular-chart.js?

Я предположил, что-то вроде этого работал бы на основе документации из двух проектов:

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

Это $ scope.data бы в контроллере as found on the angular-chart.js documentation

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>