Question

为什么默认的Chart.js图例框是透明的矩形，如下所示：

如何制作像这样的实心方块呢？我查看了http://www.chartjs.org/docs/latest/configuration/legend.html，但无法找到相关内容。

https://jsfiddle.net/askhflajsf/7yped1d5/（使用最新的master branch build）

＆＃13;

var barChartData = {
  labels: ["2013-03-09", "2013-03-16", "2013-03-23", "2013-03-30", "2013-04-06"],
  datasets: [{
    borderColor: "#3e95cd",
    data: [10943, 29649, 6444, 2330, 36694],
    fill: false,
    borderWidth: 2
  },
  {
    borderColor: "#ff3300",
    data: [9283, 1251, 6416, 2374, 9182],
    fill: false,
    borderWidth: 2
  }]
};

Chart.defaults.global.defaultFontFamily = "'Comic Sans MS'";
// Disable pointers
Chart.defaults.global.elements.point.radius = 0;
Chart.defaults.global.elements.point.hoverRadius = 0;

var ctx = document.getElementById("bar-chart").getContext("2d");
new Chart(ctx, {
  type: 'line',
  data: barChartData,
  options: {
    responsive: true,
    legend: {
      display: true,
      position: "right"
    },
    title: {
      display: false
    },
    scales: {
      xAxes: [{
        type: "time",
        ticks: {
          minRotation: 90
        }
      }]
    }
  }
});

＆＃13;

<script src="http://www.chartjs.org/dist/master/Chart.bundle.min.js"></script>
<canvas id="bar-chart"></canvas>

＆＃13;

Answer 1

这是因为您没有为数据集设置 import javafx.application.Application; import javafx.event.EventHandler; import javafx.scene.Scene; import javafx.scene.control.Label; import javafx.scene.control.RadioButton; import javafx.scene.control.TextArea; import javafx.scene.control.TextField; import javafx.scene.input.MouseButton; import javafx.scene.input.MouseEvent; import javafx.scene.layout.HBox; import javafx.scene.layout.Priority; import javafx.scene.layout.StackPane; import javafx.scene.layout.VBox; import javafx.stage.Stage; /** * * @author blj0011 */ public class JavaFXApplication7 extends Application { @Override public void start(Stage primaryStage) { VBox root = new VBox(); StackPane stackPane = new StackPane(); TextField textField = new TextField("Text"); textField.setEditable(false);//Set Editiable to false textField.setOnMouseClicked(new EventHandler<MouseEvent>() { @Override public void handle(MouseEvent mouseEvent) { if(mouseEvent.getButton().equals(MouseButton.PRIMARY)){ if(mouseEvent.getClickCount() == 2){ textField.setEditable(true);//On double click set editable to true textField.setOnKeyPressed(event ->{ if(event.getCode().toString().equals("ENTER")) { textField.setEditable(false);//On enter set editable to false } }); } } } }); Label label = new Label("Test"); VBox.setVgrow(label, Priority.ALWAYS); label.wrapTextProperty().set(true); label.setOnMouseClicked(new EventHandler<MouseEvent>() { @Override public void handle(MouseEvent mouseEvent) { if(mouseEvent.getButton().equals(MouseButton.PRIMARY)){ if(mouseEvent.getClickCount() == 2){ label.setVisible(false); TextArea textarea = new TextArea(label.getText()); textarea.setPrefHeight(label.getHeight() + 10); stackPane.getChildren().add(textarea); textarea.setOnKeyPressed(event ->{ System.out.println(event.getCode()); if(event.getCode().toString().equals("ENTER")) { label.setText(textarea.getText()); stackPane.getChildren().remove(textarea); label.setVisible(true); } }); } } } }); stackPane.getChildren().add(label); root.getChildren().add(textField); root.getChildren().add(stackPane); Scene scene = new Scene(root, 300, 250); primaryStage.setTitle("Hello World!"); primaryStage.setScene(scene); primaryStage.show(); } /** * @param args the command line arguments */ public static void main(String[] args) { launch(args); } } 属性（负责图例的填充颜色）。

backgroundColor

ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇᴀᴍᴘʟᴇ

datasets: [{
   backgroundColor: "#3e95cd",
   borderColor: "#3e95cd",
   data: [10943, 29649, 6444, 2330, 36694],
   fill: false,
   borderWidth: 2
}, {
   backgroundColor: "#ff3300",
   borderColor: "#ff3300",
   data: [9283, 1251, 6416, 2374, 9182],
   fill: false,
   borderWidth: 2
}]

var barChartData = {
   labels: ["2013-03-09", "2013-03-16", "2013-03-23", "2013-03-30", "2013-04-06"],
   datasets: [{
      backgroundColor: "#3e95cd",
      borderColor: "#3e95cd",
      data: [10943, 29649, 6444, 2330, 36694],
      fill: false,
      borderWidth: 2
   }, {
      backgroundColor: "#ff3300",
      borderColor: "#ff3300",
      data: [9283, 1251, 6416, 2374, 9182],
      fill: false,
      borderWidth: 2
   }]
};

Chart.defaults.global.defaultFontFamily = "'Comic Sans MS'";
// Disable pointers
Chart.defaults.global.elements.point.radius = 0;
Chart.defaults.global.elements.point.hoverRadius = 0;

var ctx = document.getElementById("bar-chart").getContext("2d");
new Chart(ctx, {
   type: 'line',
   data: barChartData,
   options: {
      responsive: true,
      legend: {
         display: true,
         position: "right"
      },
      title: {
         display: false
      },
      scales: {
         xAxes: [{
            type: "time",
            ticks: {
               minRotation: 90
            }
         }]
      }
   }
});

为什么默认的Chart.js图例框是透明矩形？

1 个答案: