Блог

Главная - Вопросы по программированию - Отображение вывода данных из базы данных в диаграммы с использованием JSON

Отображение вывода данных из базы данных в диаграммы с использованием JSON

#c# #sql #asp.net #highcharts #pie-chart

Вопрос:

У меня есть SQL-запрос, который возвращает вывод, аналогичный следующему:

Идентификатор проекта Завершено в процессе Не Начато
1 2 1 7
2 2 1 9
3 1 1 3

Как я могу зациклить эти данные, возвращенные из SQL в C#, и предоставить их в Highcharts в формате JSON?

В частности, я хочу использовать круг с переменным радиусом, ссылка: https://www.highcharts.com/docs/chart-and-series-types/variable-radius-pie-chart.

Я хочу рассчитать процент завершенности всех проектов и представить их в виде пирога.

Важно: Я хочу, чтобы диаграмма создавалась динамически в зависимости от любого количества возвращаемых записей. Я не хочу сам указывать проекты в серии данных JSON, они должны быть взяты из массива.

SQL:

 DROP TABLE IF EXISTS projects;
CREATE TABLE projects(id int primary key, column1 varchar(20),column2 varchar(20),column3 varchar(20));

INSERT INTO projects VALUES( 1,'Completed','Not Started','Completed');
INSERT INTO projects VALUES( 2,'Completed','Not Started','Completed');
INSERT INTO projects VALUES( 3,'Completed','Not Started','In Progress');


select 
   id, 
   count(CASE WHEN left(c,9)='Completed' THEN 1 END) as 'Competed',
   count(CASE WHEN left(c,11)='In Progress' THEN 1 END) as 'In Progress',
   count(CASE WHEN left(c,11)='Not Started' THEN 1 END) as 'Not Started'
from (
   SELECT id,Column1 as C from  projects
   union all
   SELECT id,Column2 from  projects
   union all 
   SELECT id,Column3 from  projects
   ) x
group by id;

Json:

 Highcharts.chart('container', {
  chart: {
    type: 'variablepie'
  },
  title: {
    text: 'Countries compared by population density and total area.'
  },
  tooltip: {
    headerFormat: '',
    pointFormat: '<span style="color:{point.color}">u25CF</span> <b> {point.name}</b><br/>'  
      'Area (square km): <b>{point.y}</b><br/>'  
      'Population density (people per square km): <b>{point.z}</b><br/>'
  },
  series: [{
    minPointSize: 10,
    innerSize: '20%',
    zMin: 0,
    name: 'countries',
    data: [{
      name: 'Spain',
      y: 505370,
      z: 92.9
    }, {
      name: 'France',
      y: 551500,
      z: 118.7
    }, {
      name: 'Poland',
      y: 312685,
      z: 124.6
    }, {
      name: 'Czech Republic',
      y: 78867,
      z: 137.5
    }, {
      name: 'Italy',
      y: 301340,
      z: 201.8
    }, {
      name: 'Switzerland',
      y: 41277,
      z: 214.5
    }, {
      name: 'Germany',
      y: 357022,
      z: 235.6
    }]
  }]
});

Комментарии:

1. Можете ли вы предоставить SQL, а также вывод данных JSON?

2. Я просто добавил их. Спасибо!

3. Ваш ожидаемый json не соответствует SQL. С помощью вашего SQL как вы вычисляете y amp; z ?

4. На самом деле игнорируйте эту проблему, я исправлю ее позже. Представьте, что я хочу только вычислить завершенное как y. Я изменю тип диаграммы на обычную круговую диаграмму, которая принимает только значения y ( завершено ).

5. Это не JSON, это конфигурация JavaScript для отображения диаграммы Highcharts. Просто ожидаемые данные должны быть в формате JSON, проанализированы и добавлены на диаграмму. В API вы можете найти, какой формат данных Highcharts ожидает для отображения переменной круговой диаграммы: api.highcharts.com/highcharts/series.variablepie.data

Метки: