มีวิธีปิด Title และ Subtitle ใน Highcharts หรือไม่?


108

ฉันจะฮาร์ดโค้ดโดยใช้ html ที่อยู่รอบ ๆ กราฟฉันไม่ต้องการใช้ไฟล์.

ฉันไม่เห็นตัวเลือก "ปิดใช้งาน: true" ใน API

ใครสามารถช่วยฉันที่นี่

คุณจะปิดการใช้งานชื่อ / คำบรรยายใน highcharts ได้อย่างไร?

(ถ้าคุณปล่อยให้ข้อความว่างเปล่ามันยังคงแกะช่องว่างในจุดที่เป็นชื่อเรื่องฉันไม่ต้องการให้สิ่งนี้เกิดขึ้น)


4
คุณช่วยทำเครื่องหมายคำตอบว่ายอมรับได้ไหม ;)
พลาสติก

คำตอบ:


159

การตั้งค่าข้อความหัวเรื่องเป็นสตริงว่างเป็นวิธีการทำ

ไม่มีการสร้างช่องว่างสำหรับหัวเรื่องในกรณีนั้น:

ไม่มีข้อความ: http://jsfiddle.net/jlbriggs/JVNjs/284/

พร้อมข้อความ: http://jsfiddle.net/jlbriggs/JVNjs/286/

title:{
    text:''
}

หากคุณต้องการพื้นที่น้อยกว่าที่เหลืออยู่เพียงแค่ตั้งค่า 'marginTop' ของคุณเป็น 0

{{ แก้ไขเนื่องจากความคิดเห็นจำนวนมาก :

ดังที่ได้ระบุไว้หลายครั้งด้านล่างขณะนี้เอกสารระบุtext: nullว่าเป็นวิธีการในการบรรลุเป้าหมายนี้

ทั้งสองวิธีบรรลุผลลัพธ์ที่ต้องการ


คุณช่วยดูให้ฉันหน่อยได้ไหม ฉันทำตามคำแนะนำทั้งหมดที่นี่แล้วและยังมีพื้นที่สีขาวขนาดใหญ่ (เห็นปุ่มพิมพ์ลอยอยู่ในช่องว่างที่ด้านบนขวา?) goo.gl/jHR5l
D3Chiq

1
ฉันคิดว่าฉันอาจจะแก้ไขได้แล้ว ฉันจัดให้ตำนานของฉันอยู่ด้านบนสุดและการลอยตัวของคำอธิบายแผนภูมิถูกตั้งค่าเป็นเท็จมันสร้างช่องว่างให้ตรงนั้น ฉันตั้งค่าการลอยตัวของคำอธิบายแผนภูมิเป็นจริงและตอนนี้มันได้ผลักดันส่วนที่เหลือของแผนภูมิให้สูงขึ้น
D3Chiq

2
ดังที่ระบุไว้ด้านล่างการตั้งค่าข้อความเป็น null เป็นวิธีการแก้ปัญหาที่บันทึกไว้
Tom Hubbard

1
เนื่องจากเวอร์ชัน5.0.9นี้ไม่ถูกต้อง การตั้งค่าข้อความเพื่อให้สตริงว่างสร้างข้อความหัวเรื่องเริ่มต้นเช่น "ชื่อแผนภูมิ" และ "ค่า"
mwilson

@mwilson ฉันกำลังดูการสาธิตจากลิงค์ในคำตอบด้านบนซึ่ง (ในขณะที่แสดงความคิดเห็นนี้) โดยใช้ 5.0.9 และยังใช้งานได้กับnullหรือ''. คุณสามารถอธิบายหรือสาธิตได้อย่างละเอียด?
jlbriggs

61

จากเอกสาร highcharts :

text: String ชื่อของแผนภูมิ หากต้องการปิดใช้งานหัวเรื่องให้ตั้งค่าข้อความเป็น null ค่าเริ่มต้นเป็นชื่อแผนภูมิ

ซอ: http://jsfiddle.net/daub10dr/

title:{
      text: null
      }

1
นี่คือคำตอบที่ถูกต้องไม่รู้ว่าทำไมถึงไม่ใช่คำตอบที่ยอมรับ โซลูชันอื่น ๆ ทั้งหมดที่ให้ไว้ด้านล่างนี้เป็นเพียงวิธีแก้ปัญหาเท่านั้น
เจอราร์ด

อาจเป็นผู้ใช้ที่ถามคำถาม แต่ลืมตั้งค่าสถานะว่า "ยอมรับ"
พลาสติก

2
อาจเป็นเพราะคำถามได้รับคำตอบอย่างเหมาะสม 6 เดือนก่อนที่คำตอบนี้จะถูกโพสต์ ...
jlbriggs

"อย่างเหมาะสม"?? คุณหมายถึงอะไร ?? ;-)
พลาสติก

4
สิ่งนี้ถูกต้องกับ api "ใหม่" เมื่อคำถามถูกถามสิ่งนี้ไม่ได้รับการสนับสนุน ดังนั้นทั้งสองจึงถูกต้องขึ้นอยู่กับเวอร์ชัน
TecHunter

40

ฉันชอบวิธีนี้:

title: {
    text: '',
    style: {
        display: 'none'
    }
},
subtitle: {
    text: '',
    style: {
        display: 'none'
    }
},

2
สำหรับเวอร์ชันที่ใหม่กว่าโปรดดูคำตอบจาก Plastic พร้อมข้อความ: null´
TecHunter

17

ง่ายมาก! ในเวอร์ชันล่าสุดของ Highcharts เพียงแค่ตั้งค่าคุณสมบัติของชื่อเรื่องและคำบรรยายเป็นเท็จ

{
title: false,
subtitle: false
}

ค้นหาซอที่ใช้งานได้ที่นี่: https://jsfiddle.net/samuellawrentz/hkqnvm7k/4/


13

ง่ายมาก ... ตั้งค่าข้อความของหัวเรื่องเป็น null เท่านั้น แบบนี้

    $(function () {
$('#container').highcharts({
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    title: {
        text: null  
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
});

});

ดู @ APIreference: http://api.highcharts.com/highcharts#title.text


1
บนพื้นฐานของเอกสารมันกลายเป็นundefinedเพราะสิ่งนี้กระทำgithub.com/highcharts/highcharts/commit/…
foxiris

10

ตั้งค่าช่องข้อความเป็นnull

จากเอกสารประกอบที่http://api.highcharts.com/highcharts#title.text

ข้อความ: สตริง

ชื่อของแผนภูมิ หากต้องการปิดใช้งานหัวเรื่องให้ตั้งค่าข้อความเป็น null ค่าเริ่มต้นเป็นชื่อแผนภูมิ


บนพื้นฐานของเอกสารจะไม่ถูกกำหนดเนื่องจากการกระทำนี้github.com/highcharts/highcharts/commit/…
foxiris

9

คุณสามารถทำได้เสมอ:

chart:{
    marginTop: 30
}

title:{
    text: ''
}

ที่ได้ผลสำหรับฉัน :-)

หมายเหตุ: คำตอบนี้มีไว้version 2.*สำหรับเวอร์ชันใหม่กว่าจะมีคำตอบที่ดีกว่า


8

ตามเอกสาร Highcharts วิธีที่ถูกต้องคือการตั้งค่า 'text' เป็น null


> ชื่อของแผนภูมิ หากต้องการปิดใช้งานหัวเรื่องให้ตั้งค่าข้อความเป็นไม่ได้กำหนด
Ini


3

ในโค้ด react-native ด้านล่างใช้ได้ผลสำหรับฉัน

  title: {
    style : {
      display : 'none'
    }
 }

หวังว่ามันจะช่วยได้



1

สำหรับผู้ที่ใช้ typescript คุณสามารถตั้งค่า Highcharts.TitleOptions เพื่อซ่อนชื่อแผนภูมิ

title: {
  text: undefined
},
subtitle: {
  text: undefined
}

0

นี่ใช้ได้กับฉัน !!!

title:false


1
สิ่งนี้ไม่ได้ให้คำตอบสำหรับคำถาม เมื่อคุณมีเพียงพอชื่อเสียงคุณจะสามารถที่จะแสดงความคิดเห็นในโพสต์ใด ๆ ; แทนที่จะให้คำตอบที่ไม่จำเป็นต้องชี้แจงจากผู้ถาม - จากรีวิว
Eyeslandic

-1

นี่เป็นการแฮ็กเล็กน้อย แต่คุณสามารถลองทำสิ่งนั้นได้:

title: {
    text: '<span class="hidden">My custom Hello</span>',
    align:"left",
    useHTML:true
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.