Диаграмма JS: изменение размера шрифта надписей оси X на линейной диаграмме - PullRequest
Новая
       0

Диаграмма JS: изменение размера шрифта надписей оси X на линейной диаграмме

0 голосов
/ 27 марта 2020

Я реализую линейную диаграмму с помощью диаграммы JS (где я использую массив меток, а не задаю c x и значения y для каждой точки данных). Я безуспешно пытался изменить размер шрифта моих ярлыков оси X. Я попробовал следующее, чтобы установить отметки по оси X на нужный мне размер, но это не меняет размер шрифта надписей по оси X: 

options:{
     scales:{
          xAxis: [{
               ticks:{
                    fontSize: 6,
               }
           }]
       }
}

Вот код что у меня так далеко для моей диаграммы. Используя тот же метод, что и выше, за исключением yAxis, он изменяет размер шрифта до того, который мне нужен. Тем не менее, он не делает этого для xAxis. 

var myChart= new Chart(document.getElementById("line-chart"), {
            type: 'line',
            data: {
              labels: ['Monday','Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
              datasets: [{ 
                // dummy values: enter user-data here for caloric intake according to labels.
                // Ex: data[0]=caloric intake on Monday, data[1]=caloric intake on Tuesday, etc...
                  data: [1200,1500,1600,1800,1400,600,1330], 
                  borderColor:"rgba(0,150,255, 1)",
                  borderWidth: 3,
                  lineTension: 0,
                  pointBackgroundColor: "white",
                  pointBorderColor: "rgba(0,150,255, 1)",
                  pointBorderWidth: 3,
                  pointRadius: 4,
                  fill: false
                }
              ],
            },
            options: {
              responsive: true,
              maintainAspectRatio: true,
              tooltips:{enabled:false},
              legend:{
                  display:false
              },
              scales:{
                  yAxes:[{
                      ticks:{
                          max:2000,
                          min:0,
                          fontColor: 'black',
                          fontSize: 8,
                      }
                  }],
                  xAxis:[{
                      ticks:{
                          fontColor:'black',
                          fontSize: 6,
                      }
                  }]
              },
              title: {
                display: true,
                // Can edit font-size
                fontSize: 15,
                fontColor: "black",
                text: 'Calories'
              },
              annotation:{
                events:["click"],
                annotations:[
                  {
                    drawTime: "beforeDatasetsDraw",
                    type: "box",
                    xScaleID: "x-axis-0",
                    yScaleID: "y-axis-0",
                    xMin: "Monday",
                    xMax: "Sunday",
                    yMin: 1200, // Enter lower-limit of goal here.
                    yMax: 1500, // Enter upper-limit of goal here.
                    backgroundColor: "rgba(0,255,0,0.5)",
                    borderColor: "rgb(0, 255, 0)",
                    borderWidth: 1,
                    onClick: function(e) {
                      console.log("Box", e.type, this);
                    }
                  }
                ]
              }
            }
          });

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 27 марта 2020

Изменение xAxis => xAxes

xAxes:[{
  ticks:{
  fontColor:'black',
  fontSize: 6,
 }
}]
...