Chartjsには外部オプションが含まれています

Question

私はchart.jsの使用を開始しました

私は異なるページに異なる棒グラフと折れ線グラフを持っています。

すべてのグラフには、グリッド線とツールチップのスタイリングのような一定のオプションがあります。

これらの設定を外部に保存して各ページに適用することは可能ですか？

Answer 1

グローバル設定 Chart.jsは、各チャートのレンダリング方法を決定する一連のグローバル設定を使用します。あなたは、ライブラリのデフォルトから設定を変更したい場合は、あなたのスクリプトで以下のグローバル設定セクションを含める必要があります。私はhttp://microbuilder.io/blog/2016/01/10/plotting-json-data-with-chart-js.htmlからコピー

// Set the global Chart values (these will apply to all charts) 
Chart.defaults.global = { 
    // Boolean - Whether to animate the chart 
    animation: true, 

    // Number - Number of animation steps 
    animationSteps: 60, 

    // String - Animation easing effect 
    // Possible effects are: 
    // [easeInOutQuart, linear, easeOutBounce, easeInBack, easeInOutQuad, 
    // easeOutQuart, easeOutQuad, easeInOutBounce, easeOutSine, easeInOutCubic, 
    // easeInExpo, easeInOutBack, easeInCirc, easeInOutElastic, easeOutBack, 
    // easeInQuad, easeInOutExpo, easeInQuart, easeOutQuint, easeInOutCirc, 
    // easeInSine, easeOutExpo, easeOutCirc, easeOutCubic, easeInQuint, 
    // easeInElastic, easeInOutSine, easeInOutQuint, easeInBounce, 
    // easeOutElastic, easeInCubic] 
    animationEasing: "easeOutQuart", 

    // Boolean - If we should show the scale at all 
    showScale: true, 

    // Boolean - If we want to override with a hard coded scale 
    scaleOverride: false, 

    // ** Required if scaleOverride is true ** 
    // Number - The number of steps in a hard coded scale 
    scaleSteps: null, 
    // Number - The value jump in the hard coded scale 
    scaleStepWidth: null, 
    // Number - The scale starting value 
    scaleStartValue: null, 

    // String - Colour of the scale line 
    scaleLineColor: "rgba(0,0,0,.1)", 

    // Number - Pixel width of the scale line 
    scaleLineWidth: 1, 

    // Boolean - Whether to show labels on the scale 
    scaleShowLabels: true, 

    // Interpolated JS string - can access value 
    scaleLabel: "<%=value%>", 

    // Boolean - Whether the scale should stick to integers, not floats even if drawing space is there 
    scaleIntegersOnly: true, 

    // Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value 
    scaleBeginAtZero: false, 

    // String - Scale label font declaration for the scale label 
    scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", 

    // Number - Scale label font size in pixels 
    scaleFontSize: 12, 

    // String - Scale label font weight style 
    scaleFontStyle: "normal", 

    // String - Scale label font colour 
    scaleFontColor: "#666", 

    // Boolean - whether or not the chart should be responsive and resize when the browser does. 
    responsive: false, 

    // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container 
    maintainAspectRatio: true, 

    // Boolean - Determines whether to draw tooltips on the canvas or not 
    showTooltips: true, 

    // Function - Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-external-tooltips)) 
    customTooltips: false, 

    // Array - Array of string names to attach tooltip events 
    tooltipEvents: ["mousemove", "touchstart", "touchmove"], 

    // String - Tooltip background colour 
    tooltipFillColor: "rgba(0,0,0,0.8)", 

    // String - Tooltip label font declaration for the scale label 
    tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", 

    // Number - Tooltip label font size in pixels 
    tooltipFontSize: 14, 

    // String - Tooltip font weight style 
    tooltipFontStyle: "normal", 

    // String - Tooltip label font colour 
    tooltipFontColor: "#fff", 

    // String - Tooltip title font declaration for the scale label 
    tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", 

    // Number - Tooltip title font size in pixels 
    tooltipTitleFontSize: 14, 

    // String - Tooltip title font weight style 
    tooltipTitleFontStyle: "bold", 

    // String - Tooltip title font colour 
    tooltipTitleFontColor: "#fff", 

    // String - Tooltip title template 
    tooltipTitleTemplate: "<%= label%>", 

    // Number - pixel width of padding around tooltip text 
    tooltipYPadding: 6, 

    // Number - pixel width of padding around tooltip text 
    tooltipXPadding: 6, 

    // Number - Size of the caret on the tooltip 
    tooltipCaretSize: 8, 

    // Number - Pixel radius of the tooltip border 
    tooltipCornerRadius: 6, 

    // Number - Pixel offset from point x to tooltip edge 
    tooltipXOffset: 10, 

    // String - Template string for single tooltips 
    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>", 

    // String - Template string for multiple tooltips 
    multiTooltipTemplate: "<%= value %>", 

    // Function - Will fire on animation progression. 
    onAnimationProgress: function(){}, 

    // Function - Will fire on animation completion. 
    onAnimationComplete: function(){} 
} 

を。私はこれがあなたの友人を助けることができると思う。

P/S：申し訳ありませんが私の英語が良くないので、=）