Диаграмма JS вертикальная гистограмма - измерение процента данных в каждом столбце на основе указанного максимального значения.

Question

Надеюсь, мой заголовок достаточно хорошо сформулирован, я новичок в диаграмме JS на самом деле только начал, я прочитал всю документацию несколько раз и сделал много простых и средних примеров сложности.

Я пытаюсь для построения графика результатов теста по категориям, например, математический тест включает в себя категории: Алгебра, Исчисление, Анализ, Геометрия, Комбинаторика. Я делаю график, на котором каждая полоса / столбец является категорией, а данные представляют собой количество правильных вопросов из этой категории, поскольку мой максимум для столбца / столбца я хочу иметь максимальное количество вопросов в данной категории, поэтому независимо от того, какое число я подключаю, это число всегда будет моим максимумом, так что 100%, поэтому, если у меня есть 10 вопросов по алгебре в тесте, и я правильно отвечаю 7 из 10, я хочу, чтобы полоса была на 70%, так как это сумма правильных вопросов из этой категории c, но если у меня 4/10 в исчислении, эта c полоса / столбец должна быть на уровне 40%.

Надеюсь, мое объяснение было достаточно ясным, у меня есть все данные, которые мне нужны для достижения этой цели, готовы к go, я просто не знаю, как точно выполнить это, независимо от того, сколько я исследую.

Любая помощь или указание в правильном направлении были бы очень признательны!

Answer 1

Решение сильно зависит от формата ваших базовых данных. Например, он может быть определен следующим образом:

const testResults = [
  { category: 'Algebra', totalQuestions: 10, correclyAnswered: 7 },
  { category: 'Calculus', totalQuestions: 12, correclyAnswered: 9 },
  { category: 'Analysis', totalQuestions: 8, correclyAnswered: 5 },
  { category: 'Geometry ', totalQuestions: 10, correclyAnswered: 10 },
  { category: 'Combinatorics ', totalQuestions: 9, correclyAnswered: 5 }
];

В этом случае диаграмма data может быть сгенерирована следующим образом:

const data = {
  labels: testResults.map(o => o.category),
  datasets: [
    {
      label: 'Test Results',
      backgroundColor: 'rgba(0, 255, 0, 0.2)',
      borderColor: 'rgba(0, 255, 0)',
      borderWidth: 1,
      data: testResults.map(o => (100 / o.totalQuestions * o.correclyAnswered))
    }
  ]
};

Тогда вам также придется определите диаграмму options, чтобы убедиться, что всплывающие подсказки и метки правильно отформатированы, а ось X заполнена от 0 до 100%.

const options = {      
  tooltips: {
    callbacks: {
      label: (tooltipItem, data) => {
        var label = data.datasets[tooltipItem.datasetIndex].label || '';
        return label + ': ' + tooltipItem.xLabel.toFixed(0) + '%';
      }
    }
  },
  scales: {
    xAxes: [{
      ticks: {
        min: 0,
        max: 100,
        stepSize: 10,
        callback: value => value + '%'
      } 
    }]
  }
}

Сама диаграмма будет определена следующим образом:

<HorizontalBar 
  data = { data } 
  options = { options } 
/>

Пожалуйста, посмотрите это StackBlitz .