如何更改图表字体颜色

debugcn 发表于 Dev

dark_nemesis

好的，我只是想将图表的字体颜色更改为简单的黄色。这是给学校做作业的，我真想弄清楚。任何帮助将不胜感激。

我将使用JsFiddle来显示我的代码，但是尝试将其与我的代码一起使用只会给我带来很多错误，因此我只是将其发布在这里。在此，我向那些实际上愿意咬紧牙关并通读这本书的人致深深的歉意。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Unsolved Crimes Since Batman Appeared in Gothom</title>
<style>
#graph {
/* outline our canvas */
border:1px solid #03F;
}
</style>
<link href="bar_graph.css" rel="stylesheet" type="text/css">
<script>
// Canvas and drawing context variables
var canvas;
var context;
// Chart settings
var chartMargin;
var chartAxisSpace;
var chartWidth;
var chartHeight;
// bar variables
var numBars = 0; // total number of bars
var barMargin = 20; // margin between bars
var barWidth = 0; // bar width
var maxValue = 0; // maximum data value for the bars
// number of y-axis labels
var numYLabels;
// bar animation variables
var idxStep;
var numSteps;
var growSpeed;
// Chart JSON sample data
var chartData = {'bars':[
{'title':'Year 1','value':'156'},
{'title':'Year 2','value':'93'},
{'title':'Year 3','value':'55'},
{'title':'Year 4','value':'33'},
{'title':'Year 5','value':'20'},
{'title':'Year 6','value':'12'},
{'title':'Year 7','value':'7'},
]};

// initialize the board width and height
function initGraph() {
// get reference to canvas and drawing context
canvas = document.getElementById('graph');
context = canvas.getContext('2d');
initSettings(); // initialize the chart settings
drawAxis(); // draw the chart axis and labels
growBars(); // animate the bars into the chart
}

function initSettings() {
// set our chart settings
chartMargin = 20; // margin around entire canvas
chartAxisSpace = 50; // area for the x- and y-axes
// set the chart drawing area
chartHeight = canvas.height-chartAxisSpace-2*chartMargin;
chartWidth = canvas.width-chartAxisSpace-2*chartMargin;
// set the number of labels to use for the y-axis
numYLabels = 7;
// set the number of bars based on the chartData
numBars = chartData.bars.length;
// find our max data value to scale the graph
for (var i=0; i < numBars; i++) {
if (chartData.bars[i].value > maxValue) {
maxValue = parseInt(chartData.bars[i].value);
}
}
// determine the width of each bar
barWidth = (chartWidth / numBars)-barMargin;
// initialize animation variables
idxStep = 0;
numSteps = 100;
growSpeed = 10;
}
function drawAxis() {
// Set line width for the axis lines
context.lineWidth = 2;
// draw y-axis - from lower left to upper left
context.moveTo(chartMargin+chartAxisSpace,chartHeight+chartMargin);
context.lineTo(chartMargin+chartAxisSpace, chartMargin);
context.stroke();
// draw X axis - from lower left to lower right
context.moveTo(chartMargin+chartAxisSpace, chartMargin+chartHeight);
context.lineTo(chartMargin+chartAxisSpace+chartWidth,
chartMargin+chartHeight);
context.stroke();
// Set the line width back to 1 pixel
context.lineWidth = 1;
// Add data marks to the y-axis
var markerAmount = parseInt(maxValue / numYLabels);
context.textAlign = 'right';
context.fillStyle = '#000';
// Loop through and add the markers to the y-axis
for (var i=0; i <= numYLabels; i++) {
// Determine the label and X and Y points
markerLabel = i*markerAmount;
markerXPos = chartMargin + chartAxisSpace - 5;
markerYPos = chartMargin + (chartHeight -
((i*markerAmount*chartHeight)/maxValue));
// Add the text marker at the positions determined
context.fillText(markerLabel, markerXPos, markerYPos, chartAxisSpace);
}
// Add labels for each bar based on the chart data
context.textAlign = 'center';
// loop through each bar and add the title
for (var i=0; i<numBars; i++) {
// determine the X and Y positions for the marker
markerXPos = chartMargin+chartAxisSpace + barMargin + (i *
(barWidth+barMargin)) + (.5*barWidth);
markerYPos = chartMargin+chartHeight + 10;
// Add the text under the bottom of the bar
context.fillText(chartData.bars[i].title, markerXPos, markerYPos,
barWidth);
}
// Add y-axis title
// Save the present context
context.save();
// Move the 0,0 point to the y-axis title point
context.translate(chartMargin+10,chartHeight/2);
// Rotate the current drawing context counter-clockwise 90 degrees
context.rotate(Math.PI*-90 / 180);
// Add our text title
context.fillText('Sales (in 000s)',0,0);
// Restore the context drawing orientation
context.restore();
// Add X Axis Title
context.fillText('Year Out',chartMargin+chartAxisSpace
(chartWidth/2),chartMargin+chartHeight+40);
}
// Animation function to grow the bars vertically
// Called on a timeout based on number of steps
function growBars() {
// Declare our bar x,y, and h
// barWidth is predetermined above
var barStartX = 0;
var barStartY = 0;
var barHeight = 0;
// bar value variable from the data set
var barValue = 0;
// Loop through the bars and draw each based on step
for (var i=0; i < numBars; i++) {
// get the bar value
barValue = parseInt(chartData.bars[i].value);
// calculate the bar height, starting x and y points
barHeight = (barValue * chartHeight / maxValue) / numSteps * idxStep;
barStartX = chartMargin + chartAxisSpace + (i * (barWidth + barMargin))
+ barMargin;
barStartY = chartMargin + (chartHeight-barHeight);
// call the helper function to draw the bar
drawBar(barStartX, barStartY, barWidth, barHeight);
}
// Grow the bars more if they have not finished growing
if (idxStep<numSteps) {
idxStep++;
setTimeout('growBars()',growSpeed);
}
}
// helper function to draw a bar based on dimensions passed
//could pass in context along with other params to customize
function drawBar(barX, barY, barW, barH) {
// Create rectangle with fill
context.fillStyle = '#000000';
context.fillRect(barX, barY, barW, barH);
// Add shadow to bar
context.shadowOffsetX = 3;
context.shadowOffsetY = -3;
context.shadowBlur = 3;
context.shadowColor = 'rgba(200, 200, 200, .3)';
// Add line border on the bar
context.strokeStyle = 'yellow';
context.lineWidth = 1;
context.strokeRect(barX, barY, barW, barH);
}
// on page load initialize the bar chart
window.addEventListener('load',initGraph,false);
</script>
</head>
<body>
<h1>Unsolved Crimes Since Batman Appeared in Gothom</h1>
<canvas id="graph" width="600" height="400">
This browser does not support the canvas element.
</canvas>
</body>
<footer>
<a id="bck_btn" href="index.html"> Go Back</a>
</footer>
</html>

现在，对于那些实际上愿意为我提供帮助的人，我附上了一张图片，以帮助确定需要更改颜色的字体。再一次，我非常感谢您的所有帮助，让我在此先感谢您！

-黑暗克星

达里鲁

您可以添加：

context.fillStyle = 'yellow';

这是代码

  <head>
    <meta charset="UTF-8" />
    <title>Unsolved Crimes Since Batman Appeared in Gothom</title>
    <style>
      #graph {
        /* outline our canvas */
        border: 1px solid #03F;
      }

    </style>
    <link href="bar_graph.css" rel="stylesheet" type="text/css">
    <script>
      // Canvas and drawing context variables
      var canvas;
      var context;
      // Chart settings
      var chartMargin;
      var chartAxisSpace;
      var chartWidth;
      var chartHeight;
      // bar variables
      var numBars = 0; // total number of bars
      var barMargin = 20; // margin between bars
      var barWidth = 0; // bar width
      var maxValue = 0; // maximum data value for the bars
      // number of y-axis labels
      var numYLabels;
      // bar animation variables
      var idxStep;
      var numSteps;
      var growSpeed;
      // Chart JSON sample data
      var chartData = {
        'bars': [{
          'title': 'Year 1',
          'value': '156'
        }, {
          'title': 'Year 2',
          'value': '93'
        }, {
          'title': 'Year 3',
          'value': '55'
        }, {
          'title': 'Year 4',
          'value': '33'
        }, {
          'title': 'Year 5',
          'value': '20'
        }, {
          'title': 'Year 6',
          'value': '12'
        }, {
          'title': 'Year 7',
          'value': '7'
        }, ]
      };

      // initialize the board width and height
      function initGraph() {
        // get reference to canvas and drawing context
        canvas = document.getElementById('graph');
        context = canvas.getContext('2d');
        initSettings(); // initialize the chart settings
        drawAxis(); // draw the chart axis and labels
        growBars(); // animate the bars into the chart
      }

      function initSettings() {
        // set our chart settings
        chartMargin = 20; // margin around entire canvas
        chartAxisSpace = 50; // area for the x- and y-axes
        // set the chart drawing area
        chartHeight = canvas.height - chartAxisSpace - 2 * chartMargin;
        chartWidth = canvas.width - chartAxisSpace - 2 * chartMargin;
        // set the number of labels to use for the y-axis
        numYLabels = 7;
        // set the number of bars based on the chartData
        numBars = chartData.bars.length;
        // find our max data value to scale the graph
        for (var i = 0; i < numBars; i++) {
          if (chartData.bars[i].value > maxValue) {
            maxValue = parseInt(chartData.bars[i].value);
          }
        }
        // determine the width of each bar
        barWidth = (chartWidth / numBars) - barMargin;
        // initialize animation variables
        idxStep = 0;
        numSteps = 100;
        growSpeed = 10;
      }

      function drawAxis() {
        // Set line width for the axis lines
        context.lineWidth = 2;
        // draw y-axis - from lower left to upper left
        context.moveTo(chartMargin + chartAxisSpace, chartHeight + chartMargin);
        context.lineTo(chartMargin + chartAxisSpace, chartMargin);
        context.stroke();
        // draw X axis - from lower left to lower right
        context.moveTo(chartMargin + chartAxisSpace, chartMargin + chartHeight);
        context.lineTo(chartMargin + chartAxisSpace + chartWidth,
          chartMargin + chartHeight);
        context.stroke();
        // Set the line width back to 1 pixel
        context.lineWidth = 1;
        // Add data marks to the y-axis
        var markerAmount = parseInt(maxValue / numYLabels);
        context.textAlign = 'right';
        context.fillStyle = '#000';
        // Loop through and add the markers to the y-axis
        for (var i = 0; i <= numYLabels; i++) {
          // Determine the label and X and Y points
          markerLabel = i * markerAmount;
          markerXPos = chartMargin + chartAxisSpace - 5;
          markerYPos = chartMargin + (chartHeight -
            ((i * markerAmount * chartHeight) / maxValue));

          // apply color
          context.fillStyle = 'yellow';

          // Add the text marker at the positions determined
          context.fillText(markerLabel, markerXPos, markerYPos, chartAxisSpace);
        }
        // Add labels for each bar based on the chart data
        context.textAlign = 'center';
        // loop through each bar and add the title
        for (var i = 0; i < numBars; i++) {
          // determine the X and Y positions for the marker
          markerXPos = chartMargin + chartAxisSpace + barMargin + (i *
            (barWidth + barMargin)) + (.5 * barWidth);
          markerYPos = chartMargin + chartHeight + 10;
          // Add the text under the bottom of the bar
          context.fillText(chartData.bars[i].title, markerXPos, markerYPos,
            barWidth);
        }
        // Add y-axis title
        // Save the present context
        context.save();
        // Move the 0,0 point to the y-axis title point
        context.translate(chartMargin + 10, chartHeight / 2);
        // Rotate the current drawing context counter-clockwise 90 degrees
        context.rotate(Math.PI * -90 / 180);
        // Add our text title
        context.fillText('Sales (in 000s)', 0, 0);
        // Restore the context drawing orientation
        context.restore();
        // Add X Axis Title
        context.fillText('Year Out', chartMargin + chartAxisSpace(chartWidth / 2), chartMargin + chartHeight + 40);
      }
      // Animation function to grow the bars vertically
      // Called on a timeout based on number of steps
      function growBars() {
        // Declare our bar x,y, and h
        // barWidth is predetermined above
        var barStartX = 0;
        var barStartY = 0;
        var barHeight = 0;
        // bar value variable from the data set
        var barValue = 0;
        // Loop through the bars and draw each based on step
        for (var i = 0; i < numBars; i++) {
          // get the bar value
          barValue = parseInt(chartData.bars[i].value);
          // calculate the bar height, starting x and y points
          barHeight = (barValue * chartHeight / maxValue) / numSteps * idxStep;
          barStartX = chartMargin + chartAxisSpace + (i * (barWidth + barMargin)) + barMargin;
          barStartY = chartMargin + (chartHeight - barHeight);
          // call the helper function to draw the bar
          drawBar(barStartX, barStartY, barWidth, barHeight);
        }
        // Grow the bars more if they have not finished growing
        if (idxStep < numSteps) {
          idxStep++;
          setTimeout('growBars()', growSpeed);
        }
      }
      // helper function to draw a bar based on dimensions passed
      //could pass in context along with other params to customize
      function drawBar(barX, barY, barW, barH) {
        // Create rectangle with fill
        context.fillStyle = '#000000';
        context.fillRect(barX, barY, barW, barH);
        // Add shadow to bar
        context.shadowOffsetX = 3;
        context.shadowOffsetY = -3;
        context.shadowBlur = 3;
        context.shadowColor = 'rgba(200, 200, 200, .3)';
        // Add line border on the bar
        context.strokeStyle = 'yellow';
        context.lineWidth = 1;
        context.strokeRect(barX, barY, barW, barH);
      }
      // on page load initialize the bar chart
      window.addEventListener('load', initGraph, false);

    </script>
  </head>

  <body>
    <h1>Unsolved Crimes Since Batman Appeared in Gothom</h1>
    <canvas id="graph" width="600" height="400">
      This browser does not support the canvas element.
    </canvas>
  </body>
  <footer>
    <a id="bck_btn" href="index.html"> Go Back</a>
  </footer>

</html>

jsfiddle：https ://jsfiddle.net/wdL5e2wz/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。